如何实现HTML中所有Collapsible的一键展开/折叠功能

针对你使用W3 Schools折叠面板代码时遇到的「折叠状态下无法用Ctrl+F查找内容」的问题，我们可以通过添加一键展开/折叠所有面板的功能解决，同时保留原有的单个面板交互逻辑。

以下是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Animated Collapsibles</h2>
<button id="toggleAll">展开所有折叠面板</button>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var toggleAllBtn = document.getElementById("toggleAll");
var isAllOpen = false;

// 单个折叠面板的点击逻辑
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

// 一键展开/折叠所有面板的逻辑
toggleAllBtn.addEventListener("click", function() {
  isAllOpen = !isAllOpen;
  // 更新按钮文本
  this.textContent = isAllOpen ? "折叠所有折叠面板" : "展开所有折叠面板";
  
  for (var i = 0; i < coll.length; i++) {
    var content = coll[i].nextElementSibling;
    if (isAllOpen) {
      // 展开所有
      coll[i].classList.add("active");
      content.style.maxHeight = content.scrollHeight + "px";
    } else {
      // 折叠所有
      coll[i].classList.remove("active");
      content.style.maxHeight = null;
    }
  }
});
</script>

</body>
</html>

关键修改说明 #

• 控制按钮标识：给顶部的控制按钮添加id="toggleAll"，方便JavaScript快速定位元素
• 状态变量：新增isAllOpen变量记录当前所有面板的展开/折叠状态
• 全量控制逻辑：
  • 点击按钮时切换状态，同步更新按钮文本，让用户清晰知道当前功能
  • 遍历所有折叠面板，统一添加/移除active类，并设置内容区域的maxHeight，实现全展开或全折叠
• 兼容原有逻辑：单个面板的点击交互完全保留，全量操作不会破坏原有功能

这样修改后，你可以通过点击顶部按钮一键展开所有面板，此时就能正常使用Ctrl+F查找内容；用完后再一键折叠，节省页面空间。

内容的提问来源于stack exchange，提问作者Titaniumammas69