JS如何实现点击下拉按钮时仅对应单个列表内容可见

问题原因 #

原有代码仅对当前点击的下拉按钮对应的菜单做显隐切换，没有主动关闭其他已展开的下拉菜单，因此会出现多个菜单同时显示的情况。

修复代码 #

JS代码修改 #

将原有JS替换为以下内容即可实现需求：

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

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    // 先关闭所有非当前点击的下拉菜单
    for (let j = 0; j < dropdown.length; j++) {
      if (dropdown[j] !== this) {
        dropdown[j].classList.remove("active");
        const otherContent = dropdown[j].nextElementSibling;
        otherContent.style.display = "none";
      }
    }
    // 再切换当前点击的菜单状态
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

补充HTML注意事项 #

当前提供的HTML存在多余的闭合</a>标签问题，部分option文本没有对应<a>开头标签，建议修正避免渲染异常，示例修正如下：

<div class="cursor-pointer w-full border-gray-100 items-start border-b-2 " style="height:40px">
  <div class="text-base text-gray-700 ml-10 mt-7 ">
    <a href="#">option 1</a>
  </div>
</div>
<div class="w-full border-gray-100 items-start border-b-2" style="height:40px">
  <div class="text-base text-gray-700 ml-10 mt-3">
    <a href="#">option 2</a>
  </div>
</div>

实现逻辑说明 #

• 每次点击任意下拉按钮时，先遍历全部下拉按钮，将除当前点击项之外的所有下拉菜单设置为隐藏，同时移除active状态
• 再单独切换当前点击的下拉菜单的显隐状态，即可保证同一时间最多只有一个下拉菜单处于展开状态
• 点击当前已展开的下拉按钮时，也可以正常收起该菜单，符合常规交互逻辑

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