js文字折叠

基础概念

JavaScript 文字折叠是指通过 JavaScript 代码实现文本内容的展开与折叠功能。这种功能常用于网页中，以便用户能够根据需要查看或隐藏详细内容，从而提升用户体验。

类型与应用场景

手风琴效果：多个内容块可以逐一展开和折叠，类似于手风琴的风箱。
简单折叠/展开：单个内容块的显示与隐藏。
导航菜单折叠：在移动设备上，将导航菜单折叠起来，节省屏幕空间。

应用场景包括但不限于：

长篇文章的分段显示。
复杂表单的字段分组展示。
侧边栏导航的折叠收纳。

示例代码

以下是一个简单的 JavaScript 文字折叠功能的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字折叠示例</title>
<style>
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #ccc;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>文字折叠示例</h2>

<button class="collapsible">点击展开/折叠</button>
<div class="content">
  <p>这里是需要折叠的文本内容。</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>