JavaScript优化折叠元素：点击时自动关闭其他已展开子项

需求说明 #

现有折叠切换脚本基础展开/收起功能正常，需要新增交互逻辑：点击任意折叠项触发事件时，同步关闭所有此前处于展开状态的子分类，仅执行当前点击项的展开操作；点击已展开的当前项时，该项正常收起。

实现逻辑 #

不需要修改原有CSS样式和HTML结构，仅调整JS事件绑定内的逻辑即可：

1. 点击事件触发时，先记录当前点击项的激活状态（判断点击前是否为展开状态）
2. 遍历所有折叠项，统一移除激活类名、重置对应内容区高度为收起状态
3. 如果当前点击项点击前为收起状态，单独给当前项加激活类名、展开对应内容区；如果点击前已经是展开状态，上一步的统一重置已经完成收起操作，无需额外处理

完整实现代码 #

JS代码（替换原有JS即可） #

var collapse = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < collapse.length; i++) {
  collapse[i].addEventListener("click", function() {
    // 记录当前项点击前的展开状态
    const isCurrentOpened = this.classList.contains("activeCollapse");

    // 全局重置：所有折叠项切为收起状态
    for (let j = 0; j < collapse.length; j++) {
      collapse[j].classList.remove("activeCollapse");
      const relatedContent = collapse[j].nextElementSibling;
      relatedContent.style.maxHeight = null;
    }

    // 若当前项点击前为收起状态，则展开当前项
    if (!isCurrentOpened) {
      this.classList.add("activeCollapse");
      const currentContent = this.nextElementSibling;
      currentContent.style.maxHeight = currentContent.scrollHeight + "px";
    }
  });
}

CSS代码（无需修改） #

.catColumn {
  width: 400px;
  margin: 0 auto;
}

.collapsible {
  width: 100%;
  padding: 14px 8px;
  margin-top: 10px;
  color: #5a2e0f;
  background-color: #fff;
  border: 1px solid #c1bfbf;
  outline: none;
  border-radius: 6px;
}

.collapsible:hover {
  background-color: #efdac6;
}

.collapsible:after {
  float: right;
  content: '\002B';
  color: #5a2e0f;
  font-size: 1.8em;
  margin-left: 5px;
  cursor: pointer;
  line-height: 26px;
}

.activeCollapse {
  background-color: #efdac6;
  border-radius: 0;
  border-bottom: 0px;
}

.activeCollapse:after {
  content: "\2212";
}

ul.subcats {
  width: 100%;
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
  font-size: 13px;
}

ul.subcats li {
  padding: 12px;
}

HTML代码（无需修改） #

<div class="catColumn">
  <div class="collapsible">cat1</div>
  <ul class="subcats">
    <li>subcat1</li>
    <li>subcat2</li>
  </ul>
  <div class="collapsible">cat2</div>
  <ul class="subcats">
    <li>subcat3</li>
    <li>subcat4</li>
  </ul>
</div>

效果说明 #

• 任意时刻最多只有一个折叠项处于展开状态，符合手风琴组件交互规范
• 保留原有1s平滑展开/收起过渡动画，样式表现和原有版本完全一致
• 点击已展开的折叠项可正常全局收起，无交互bug

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