如何实现Accordion组件一次仅展开一个面板？

解决方案 #

要实现一次仅展开一个折叠面板，核心逻辑是点击任意面板时，先关闭所有已展开的其他面板，再处理当前面板的状态。替换你的JavaScript代码如下：

const accordians = document.getElementsByClassName("accordion_btn");
for (var i = 0; i < accordians.length; i += 1) {
  accordians[i].onclick = function() {
    // 重置所有面板的状态：关闭内容、移除箭头样式
    const allContents = document.querySelectorAll('.accordion_content');
    const allBtns = document.querySelectorAll('.accordion_btn');
    
    allContents.forEach(content => content.style.maxHeight = null);
    allBtns.forEach(btn => btn.classList.remove('arrowClass'));
    
    // 处理当前面板
    const currentContent = this.nextElementSibling;
    if (!currentContent.style.maxHeight) {
      this.classList.add('arrowClass');
      currentContent.style.maxHeight = currentContent.scrollHeight + "px";
    }
  }
}

代码说明 #

• 全局重置：点击按钮时，先遍历所有折叠内容和按钮，统一关闭所有面板并恢复箭头样式，确保没有遗留的展开状态。
• 当前面板处理：判断当前面板是否处于关闭状态，若是则添加箭头样式并设置内容高度，完成展开操作；如果当前面板原本是展开的，全局重置已经将其关闭，无需额外处理。
• 你的CSS和HTML代码无需修改，直接替换JS部分即可实现单面板展开的效果。

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