JavaScript实现手风琴组件关闭时active类未正常移除问题求助

问题根源 #

你的代码逻辑中，点击已经展开的手风琴项时，只会执行折叠面板的操作，没有同步移除当前元素的active类，因此伪元素图标不会恢复为初始状态。

修复后的完整JavaScript代码 #

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;
    // 先记录当前点击项是否已经处于激活状态
    const isCurrentActive = this.classList.contains("active");

    // 不管点击哪一项，先统一清空所有已激活的手风琴项
    const activeItems = document.querySelectorAll(".accordion-div .accordion.active");
    for(let j = 0; j < activeItems.length; j++){
      activeItems[j].classList.remove("active");
      activeItems[j].nextElementSibling.style.maxHeight = null;
    }

    // 如果当前点击的项之前没有激活，才执行展开逻辑
    if (!isCurrentActive) {
      this.classList.add("active");
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

逻辑说明 #

调整后的逻辑可以同时满足你的两个需求：

• 点击未展开的新手风琴项：先清空其他已激活项，再激活当前点击项，保证同一时间只有一个展开项
• 点击已经展开的手风琴项：清空所有激活项后，识别到当前项之前已经是激活状态，不再执行激活逻辑，就实现了点击自身关闭的效果

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