打开下拉菜单时隐藏其他同级子导航的JavaScript实现问题

看起来你是要实现点击一个子导航时自动收起其他已展开的子导航，这个需求在移动端导航里非常常见，我来帮你一步步解决问题~

首先先理清楚核心逻辑：当点击某个下拉按钮时，我们需要完成两件事：

• 切换当前按钮对应子菜单的显示/隐藏状态
• 收起所有其他已经展开的子菜单

第一步：先明确HTML结构（补全你给出的代码逻辑） #

通常子导航会嵌套在下拉按钮附近，我先补全符合常规逻辑的结构，方便后续代码适配：

<div id="nav_mob">
  <div id="nav-toggle"><span></span></div>
  <div class="dropdown_mob">
    <ul>
      <li>
        <a class="dropdown_btn">Overview</a>
        <!-- 子导航菜单 -->
        <ul class="submenu">
          <li>Subitem 1</li>
          <li>Subitem 2</li>
        </ul>
      </li>
      <li>
        <a class="dropdown_btn">Products</a>
        <ul class="submenu">
          <li>Product A</li>
          <li>Product B</li>
        </ul>
      </li>
      <!-- 更多下拉项 -->
    </ul>
  </div>
</div>

第二步：编写JavaScript实现互斥逻辑 #

给每个下拉按钮绑定点击事件，完成核心功能：

// 等待DOM加载完成后再执行代码，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有下拉按钮
  const dropdownBtns = document.querySelectorAll('.dropdown_btn');

  dropdownBtns.forEach(btn => {
    btn.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止a标签的默认跳转行为（如果用的是a标签）
      
      // 获取当前按钮对应的子菜单
      const currentSubmenu = this.nextElementSibling;
      // 切换当前子菜单的显示状态
      currentSubmenu.classList.toggle('active');
      
      // 遍历所有其他下拉按钮，收起它们的子菜单
      dropdownBtns.forEach(otherBtn => {
        if (otherBtn !== this) {
          const otherSubmenu = otherBtn.nextElementSibling;
          otherSubmenu.classList.remove('active');
        }
      });
    });
  });
});

第三步：添加CSS控制菜单显示/隐藏 #

用CSS实现菜单的展开收起过渡，让交互更流畅：

/* 默认隐藏子菜单 */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease; /* 添加平滑过渡动画 */
}

/* 激活状态下展开子菜单 */
.submenu.active {
  max-height: 500px; /* 设置一个足够容纳子菜单内容的值 */
}

可能的错误点排查 #

1. 子菜单选择器不对：如果你的子菜单不是按钮的下一个兄弟元素，比如嵌套在父元素里，要调整选择器，比如改成this.parentElement.querySelector('.submenu')
2. 事件绑定时机错误：如果JS代码放在页面头部，会因为DOM还没加载完找不到元素，一定要把代码放在DOMContentLoaded事件里
3. CSS样式冲突：检查有没有其他CSS规则覆盖了.submenu的max-height或display属性，导致样式不生效

这样修改后，点击任意一个下拉按钮，只会展开对应的子菜单，其他已展开的子菜单会自动收起啦~

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