如何在打开新下拉菜单时关闭已打开的下拉菜单

当前代码的问题是，点击每个筛选块时只会单独切换自身的下拉状态，不会自动关闭其他已打开的下拉菜单。只需修改JavaScript逻辑，实现点击某一菜单时先关闭所有其他菜单，再切换当前菜单状态即可。

修改后的JavaScript代码 #

const burgerBtn = document.querySelector(".header__burger"),
  menu = document.querySelector(".menu"),
  body = document.querySelector(".body"),
  filter = document.querySelector(".filter"),
  blockFilter = document.querySelectorAll(".block-filter"),
  dropdown = document.querySelectorAll(".block-filter__dropdown");

if (filter) {
  blockFilter.forEach(item => {
    item.addEventListener("click", event => {
      // 关闭所有其他筛选块的下拉菜单和激活状态
      blockFilter.forEach(otherItem => {
        if (otherItem !== item) {
          otherItem.querySelector(".block-filter__dropdown").classList.remove("block-filter__dropdown_state_active");
          otherItem.querySelector(".block-filter__icon").classList.remove("block-filter__icon_state_active");
        }
      });

      // 切换当前筛选块的状态
      item.querySelector(".block-filter__dropdown").classList.toggle("block-filter__dropdown_state_active");
      item.querySelector(".block-filter__icon").classList.toggle("block-filter__icon_state_active");

      // 选择菜单项时更新显示值
      if (event.target.classList.contains("block-filter__item")) {
        item.querySelector(".block-filter__value").textContent = event.target.textContent;
      }
    })
  })
}

关键逻辑说明 #

• 点击任意筛选块时，先遍历所有筛选块，排除当前点击的块，移除其他块的激活类，确保其他菜单关闭。
• 再对当前点击的块执行toggle操作，切换其下拉菜单的显示/隐藏状态。
• 原有更新选中值的逻辑保持不变。

不需要修改HTML结构 #

你的现有HTML结构已经满足需求，无需调整：

<div class="filter hero__filter">
  <form class="filter__form">
    <div class="filter__block block-filter">
      <div class="block-filter__button">
        <div class="block-filter__header">
          <span class="block-filter__type">Purpose</span>
          <div class="block-filter__icon"></div>
        </div>
        <span class="block-filter__value">Buy</span>
      </div>
      <div class="block-filter__dropdown">
        <span class="block-filter__item">Buy</span>
        <span class="block-filter__item">Sell</span>
      </div>
    </div>
    <!-- 其他筛选块结构类似即可 -->
  </form>
</div>

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