如何修改JavaScript代码实现Accordion手风琴同一时间仅展开一个面板

修改思路 #

• 点击手风琴元素时，先遍历所有手风琴节点，排除当前点击的节点，统一移除active类，同时将对应面板的maxHeight设为null关闭其他已展开面板
• 再单独处理当前点击节点的展开/收起逻辑，保留原有的点击自身可收起的交互

完整修改后代码 #

JavaScript代码 #

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    // 关闭所有其他已展开的面板
    for (var j = 0; j < acc.length; j++) {
      if (acc[j] !== this) {
        acc[j].classList.remove("active");
        acc[j].nextElementSibling.style.maxHeight = null;
      }
    }
    // 处理当前点击面板的状态切换
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

HTML代码（无需修改） #

<div class="accordion"><b>Heading 1</b></div>
<div class="panel">
  <p class="text-light">Text 1</p>
</div>
<div class="accordion"><b>Heading 2</b></div>
<div class="panel">
  <p class="text-light">Text 2</p>
</div>

交互说明 #

• 任意时间最多仅1个面板处于展开状态，点击新面板时自动关闭已打开的其他面板
• 保留点击当前已展开面板的标题可收起该面板的逻辑，符合常规手风琴交互习惯
• 原有样式完全不需要调整，仅修改JS逻辑即可生效

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