JavaScript手风琴打开新项时旧项不自动折叠怎么修复

问题根因 #

原有代码仅对当前被点击的手风琴项做状态切换，没有对其余所有手风琴项做激活状态清除逻辑，因此会出现多个项同时展开的异常交互。

修复后代码 #

const acc = document.getElementsByClassName('ac-btn');

for (let i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    // 记录当前点击项点击前的激活状态
    const isCurActive = this.classList.contains('active-ac');

    // 统一清空所有手风琴项的激活状态与展开样式
    for (let j = 0; j < acc.length; j++) {
      acc[j].classList.remove('active-accardacon', 'active-ac');
      acc[j].nextElementSibling.classList.remove('show');
    }

    // 仅当点击前未激活时，才展开当前项；点击已激活项则保持折叠状态
    if (!isCurActive) {
      this.classList.add('active-accardacon', 'active-ac');
      this.nextElementSibling.classList.add('show');
    }
  }
}

核心修改说明 #

• 新增激活状态前置判断：避免点击已展开项时无法折叠的问题，符合常规手风琴交互逻辑
• 新增全局状态重置逻辑：每次触发点击事件先清空所有项的激活状态，保证同一时间最多只有一个项展开
• 优化循环变量声明：使用let声明循环作用域变量，避免全局变量污染导致的潜在作用域问题

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