如何为W3Schools折叠面板添加全部展开/收起按钮？

没问题！我帮你在现有折叠面板的基础上加上「全部展开」和「全部收起」的功能，直接看修改后的完整代码，我会给你拆解关键逻辑：

完整实现代码 #

HTML部分

<button id="expandAll">全部展开</button>
<button id="collapseAll">全部收起</button>

<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>

CSS部分（在原有基础上优化了布局样式）

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-top: 8px; /* 增加间距提升美观度 */
}

.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;
  margin-bottom: 8px;
}

/* 给控制按钮添加样式，和折叠面板区分开 */
#expandAll, #collapseAll {
  padding: 10px 16px;
  margin: 8px 4px 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #2196F3;
  color: white;
  font-size: 14px;
}

#expandAll:hover, #collapseAll:hover {
  background-color: #1976D2;
}

JavaScript部分

// 原有单个折叠面板逻辑
var coll = document.getElementsByClassName("collapsible");
var i;
for (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";
    }
  });
}

// 全部展开功能
document.getElementById('expandAll').addEventListener('click', function() {
  for (let i = 0; i < coll.length; i++) {
    // 给折叠按钮添加active类，切换箭头图标
    coll[i].classList.add('active');
    // 获取对应的内容面板
    let content = coll[i].nextElementSibling;
    // 设置最大高度为内容实际高度
    content.style.maxHeight = content.scrollHeight + 'px';
  }
});

// 全部收起功能
document.getElementById('collapseAll').addEventListener('click', function() {
  for (let i = 0; i < coll.length; i++) {
    // 移除active类，恢复箭头图标
    coll[i].classList.remove('active');
    let content = coll[i].nextElementSibling;
    // 重置最大高度为0，隐藏内容
    content.style.maxHeight = null;
  }
});

关键逻辑说明 #

1. 添加控制按钮：在HTML里新增了两个带唯一ID的按钮，方便JS快速获取元素并绑定点击事件。
2. 全部展开函数：遍历所有折叠面板按钮，强制添加active类（切换箭头图标），同时把对应的内容面板maxHeight设为实际滚动高度，实现批量展开。
3. 全部收起函数：反向操作，移除active类，把内容面板maxHeight设为null，恢复隐藏状态。
4. 样式优化：给控制按钮加了基础样式，和折叠面板区分开，页面布局更清晰（这部分可选，你可以根据自己的需求调整）。

这样修改后，你就能通过两个按钮一键控制所有折叠面板的状态了，同时单个面板的点击功能也完全保留~

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