使用 html 展开折叠文本

Question

我想展开/折叠文本。我找到了几个代码，但他们使用的问题是分开的文件。html 我需要的是将它们全部设置在同一个文档中，.html 因为我使用的是 HTML 编辑器，所以我不得不将所有代码放在同一页面中。请告知该怎么做，或者是否有一个非常有帮助的教程。提前谢谢你。

Answer 1

这里你去学习这个，你会了解基础知识：

W3Schools

用这个编辑你的代码（分配的不仅仅是括号）：

Brackets

这是一页 HTML，带有 style 标签和 script 标签：

你的 css 会进入 <style></style>

您的 js 将进入 <script></script>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" />

<title>Untitled Document</title>
    
<style>

.page-header {
  color: #000;
}

#click {
  border-radius: 2%;
  height: 30px;
  color: green;
}
     
</style>

</head>

<body class="test">
    <header class="page-header">SIMPLE EXAmPLE</header>      
<div class="row">
  <div class="element">
      <div class="start" id="testdiv"></div>
      <button id="click">click to color background</button>
  </div>
</div>   
</body>
    
<script type="text/javascript">
    var clickAlert = document.getElementById('click');
    var rainbow = ["red", "blue", "green", "yellow"];

    function change() {
      document.body.style.background = rainbow[Math.floor(4*Math.random())];
    }

    clickAlert.addEventListener("click", change);  
</script>  
</html>

Answer 2

您可以使用纯 HTML 来做到这一点。只有 2 个学期。

<details>
<summary> click me </summary>
Text you want to expand or collide
</details>

就这么简单

使用 html 展开折叠文本

Expand collapse text with html

javascript

html

css

collapse

expand