如何实现父导航激活状态下子菜单项独立的isActive激活状态

参考效果如下：

核心逻辑很简单：把主主题、子主题的激活状态分开管控，不要用单个全局变量/单次全量清类的方式控制所有激活态，新手最容易犯的错就是每次点击就清空页面所有isActive类，再给当前点击元素加类，必然会导致点子项时主项激活态被清掉。

1. 基础HTML结构 #

先做层级嵌套，把同组的主按钮和子列表放在同一个容器里，方便后续通过DOM关系查找对应父/子元素，不用写复杂的id匹配逻辑：

<nav class="vertical-nav">
  <!-- 单组导航：1个主按钮+对应子列表 -->
  <div class="nav-group">
    <button class="main-btn">产品中心</button>
    <ul class="sub-list">
      <li><button class="sub-btn">硬件产品</button></li>
      <li><button class="sub-btn">软件服务</button></li>
      <li><button class="sub-btn">定制方案</button></li>
    </ul>
  </div>
  <div class="nav-group">
    <button class="main-btn">帮助支持</button>
    <ul class="sub-list">
      <li><button class="sub-btn">使用文档</button></li>
      <li><button class="sub-btn">售后通道</button></li>
      <li><button class="sub-btn">社区交流</button></li>
    </ul>
  </div>
</nav>

2. 激活态样式定义 #

主按钮、子按钮的激活样式独立写，互不干扰，顺便写好子列表默认隐藏、主按钮激活时展开的逻辑：

/* 基础布局样式可以自己调整，这里只放核心逻辑相关 */
.main-btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  text-align: left;
  background: #f1f5f9;
  cursor: pointer;
}
/* 主按钮激活样式 */
.main-btn.isActive {
  background: #2563eb;
  color: #fff;
}
.sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none; /* 默认隐藏子列表 */
}
/* 主按钮激活时 显示同组子列表 */
.nav-group:has(.main-btn.isActive) .sub-list {
  display: block;
}
.sub-btn {
  width: 100%;
  padding: 10px 16px 10px 32px;
  border: none;
  text-align: left;
  background: #fff;
  cursor: pointer;
}
/* 子按钮激活样式 */
.sub-btn.isActive {
  background: #bfdbfe;
  color: #1e40af;
}

3. JS交互逻辑 #

两层逻辑独立，点击子项时主动校验父级主按钮的激活状态，不会误删主按钮的激活类：

// 捕获所有主按钮
const mainButtons = document.querySelectorAll('.main-btn')
// 主按钮点击逻辑
mainButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 切换主按钮激活态前，先清空所有其他主按钮的激活状态
    mainButtons.forEach(b => b.classList.remove('isActive'))
    // 给当前点击的主按钮加激活态
    btn.classList.add('isActive')
    // 可选：切换主按钮时清空所有子按钮的激活态，避免残留
    document.querySelectorAll('.sub-btn').forEach(b => b.classList.remove('isActive'))
  })
})

// 捕获所有子按钮
const subButtons = document.querySelectorAll('.sub-btn')
// 子按钮点击逻辑
subButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 找到当前子按钮所属的导航组
    const currentGroup = btn.closest('.nav-group')
    // 只清掉同组内其他子按钮的激活态，不要动其他组、也不要动主按钮的类
    currentGroup.querySelectorAll('.sub-btn').forEach(b => b.classList.remove('isActive'))
    // 给当前点击的子按钮加激活态
    btn.classList.add('isActive')

    // 兜底：确保当前子按钮对应的父级主按钮一定是激活状态
    const parentMainBtn = currentGroup.querySelector('.main-btn')
    if (!parentMainBtn.classList.contains('isActive')) {
      mainButtons.forEach(b => b.classList.remove('isActive'))
      parentMainBtn.classList.add('isActive')
    }
  })
})

关键避坑点 #

• 不要图省事写「点击任意按钮先清空全页面所有isActive类」的逻辑，这是主项激活态丢失的核心原因
• 主项的激活判定有两个场景：直接点击主项、点击主项下属的任意子项，只要满足其中一个就要保留激活态
• 同组子项是互斥激活关系，所以点击子项时只需要清空同组内其他子项的类即可，不需要全局清空
• 如果需要页面加载时默认选中某一项，直接在对应HTML元素上加isActive类就可以正常生效，不需要额外改JS

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