实现navbar菜单toggle state 修复导航栏菜单项激活状态切换异常问题

问题根源 #

当前交互逻辑仅对单次点击的目标元素做active类的切换操作，没有对其他同级导航项的激活状态做统一清除，因此会出现多选中态共存的问题。

实现思路 #

每次触发导航项点击事件时，先全局清空所有导航项的激活状态、隐藏所有下拉面板，再根据当前点击项的原有状态判断是否需要激活当前项、展开对应下拉，完全覆盖要求的两个交互场景。

代码实现 #

1. HTML结构参考 #

<nav class="navbar">
  <!-- 导航菜单项，通过data-dropdown属性绑定对应下拉面板的ID -->
  <div class="nav-item" data-dropdown="purchases">Purchases</div>
  <div class="nav-item" data-dropdown="studies">Studies</div>
  <div class="nav-item" data-dropdown="writing">Writing</div>
  <div class="nav-item" data-dropdown="education">Education</div>
  <div class="nav-item" data-dropdown="masons">Masons</div>

  <!-- 对应下拉面板，默认隐藏 -->
  <div class="dropdown-panel" id="purchases">Purchases 板块下拉内容</div>
  <div class="dropdown-panel" id="studies">Studies 板块下拉内容</div>
  <div class="dropdown-panel" id="writing">Writing 板块下拉内容</div>
  <div class="dropdown-panel" id="education">Education 板块下拉内容</div>
  <div class="dropdown-panel" id="masons">Masons 板块下拉内容</div>
</nav>

2. 基础样式参考 #

/* 下拉面板默认隐藏 */
.dropdown-panel {
  display: none;
}
/* 激活的导航项样式，可自定义 */
.nav-item.active {
  color: #2d7ff9;
  background-color: #f0f5ff;
}
/* 展示状态的下拉面板 */
.dropdown-panel.show {
  display: block;
}

3. 交互逻辑代码（原生JS实现） #

// 获取所有导航项和下拉面板DOM节点
const allNavItems = document.querySelectorAll('.nav-item');
const allDropdownPanels = document.querySelectorAll('.dropdown-panel');

// 给每个导航项绑定点击事件
allNavItems.forEach(navItem => {
  navItem.addEventListener('click', () => {
    // 先记录当前点击项的原有激活状态
    const originalActiveState = navItem.classList.contains('active');
    
    // 全局清空所有激活状态、隐藏所有下拉面板
    allNavItems.forEach(item => item.classList.remove('active'));
    allDropdownPanels.forEach(panel => panel.classList.remove('show'));
    
    // 如果当前点击项之前未激活，就激活当前项并展示对应下拉
    if (!originalActiveState) {
      navItem.classList.add('active');
      const targetDropdownId = navItem.getAttribute('data-dropdown');
      document.getElementById(targetDropdownId).classList.add('show');
    }
  })
})

功能验证 #

• 场景一：点击任意菜单项，对应下拉展开，再次点击同一项，下拉收起、无激活状态残留
• 场景二：点击菜单项A展开下拉后，点击其他任意菜单项B，菜单项A的激活状态自动清除、下拉收起，菜单项B激活、对应下拉展开

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