W3C Accordion 如何实现每次仅打开一个面板？

没问题，这是手风琴组件非常常见的需求，咱们可以通过完善你的JavaScript代码来实现「每次仅打开一个面板，点击新面板自动关闭其他」的效果。下面是完整的实现方案：

完整代码示例 #

首先假设你的HTML是W3C标准的Accordion结构：

<button class="accordion">面板1</button>
<div class="panel">
  <p>面板1的内容...</p>
</div>

<button class="accordion">面板2</button>
<div class="panel">
  <p>面板2的内容...</p>
</div>

<button class="accordion">面板3</button>
<div class="panel">
  <p>面板3的内容...</p>
</div>

对应的基础CSS（保证面板展开/折叠的过渡效果）：

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

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

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

关键的JavaScript代码（替换你现有不完整的片段）：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    // 先判断当前按钮对应的面板是否已经展开
    var isCurrentActive = this.classList.contains("active");
    
    // 第一步：关闭所有已展开的面板，重置所有按钮状态
    var allAccordions = document.getElementsByClassName("accordion");
    var allPanels = document.getElementsByClassName("panel");
    
    for (var j = 0; j < allAccordions.length; j++) {
      allAccordions[j].classList.remove("active");
      allPanels[j].style.maxHeight = null;
    }
    
    // 第二步：如果当前面板原本是闭合的，就展开它；如果原本是展开的，保持关闭（支持点击展开面板再次关闭）
    if (!isCurrentActive) {
      this.classList.add("active");
      var targetPanel = this.nextElementSibling;
      targetPanel.style.maxHeight = targetPanel.scrollHeight + "px";
    }
  });
}

代码逻辑拆解 #

• 状态判断：点击按钮时先检查它是否处于「激活（面板展开）」状态
• 全局重置：遍历所有accordion按钮和面板，统一移除激活样式、折叠所有面板
• 当前面板处理：如果当前按钮原本是未激活状态，就给它加上激活样式，并展开对应的面板；如果原本是激活状态，就保持关闭（实现点击展开面板也能折叠的交互）

适配小提示 #

如果你的面板和按钮不是严格的兄弟元素关系，可以根据实际DOM结构调整获取面板的方式，比如用this.querySelector('.panel')或者其他选择器，但W3C标准结构里按钮都紧跟面板，所以nextElementSibling完全够用。

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