Vanilla JS Accordion如何实现点击时仅单个项保持展开

原有代码的逻辑只针对当前点击的手风琴项做激活状态切换，没有处理其他已经处于展开状态的项，所以会出现多个区块同时展开的情况。要实现同一时间仅一个项展开，只需要在切换当前项状态前，先把所有项的激活状态清空即可。

修改后的完整代码 #

const accordionItems = document.querySelectorAll('.accordion__item');

accordionItems.forEach(item => {
  item.addEventListener('click', function() {
    // 提前记录当前点击项在点击前的激活状态，避免后续清空状态后无法判断
    const isActiveBeforeClick = this.classList.contains('is-active');

    // 遍历所有手风琴项，统一移除激活类，全部收起
    accordionItems.forEach(i => i.classList.remove('is-active'));

    // 如果点击前当前项是未激活状态，就给当前项加上激活类展开
    // 如果点击前已经是激活状态，清空后就保持收起，实现点击已展开项可手动收起的交互
    if (!isActiveBeforeClick) {
      this.classList.add('is-active');
    }
  });
});

逻辑说明 #

• 不需要修改原有HTML结构和CSS样式，完全兼容之前用is-active类控制展开/收起的逻辑
• 额外兼容了点击已展开项自动收起的常用交互，不会出现点击当前展开区块无法收起的问题
• 所有状态操作都基于原生classList API，没有额外性能开销

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