如何修改现有JS实现侧边菜单打开新下拉项时自动关闭已展开项

解决方案 #

直接替换原有JS代码即可，无需修改HTML和CSS：

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    // 记录当前点击按钮的原有激活状态
    const isActive = this.classList.contains("active");
    // 关闭所有已展开的下拉项
    for (let j = 0; j < dropdown.length; j++) {
      dropdown[j].classList.remove("active");
      dropdown[j].nextElementSibling.style.display = "none";
    }
    // 仅当点击前当前项未激活时才展开
    if (!isActive) {
      this.classList.add("active");
      this.nextElementSibling.style.display = "block";
    }
  });
}

逻辑说明 #

• 每次点击下拉按钮时，先判断当前按钮是否已经处于激活展开状态
• 遍历所有下拉按钮，统一移除激活状态、隐藏所有下拉内容
• 如果点击前当前按钮未激活，就激活当前按钮并展开对应下拉内容；如果已经激活，就保持隐藏状态，实现点击已展开项可收起的交互

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