JS实现父li激活子li未激活，点击子li后父子均激活的菜单需求

没问题，我帮你搞定这个菜单交互需求，下面是完整的实现代码和说明：

1. HTML 结构 #

首先咱们先搭好菜单的DOM结构，父节点默认加上active类，子节点初始都不带这个类：

<ul class="menu">
  <li class="parent active">
    父菜单
    <ul class="submenu">
      <li>子菜单1</li>
      <li>子菜单2</li>
      <li>子菜单3</li>
    </ul>
  </li>
</ul>

2. CSS 样式 #

接下来用CSS定义激活状态的高亮效果，让用户能直观看到哪个节点处于激活状态：

/* 基础菜单样式 */
.menu {
  list-style: none;
  padding: 0;
  width: 200px;
  background: #f5f5f5;
}

.menu li {
  padding: 10px;
  cursor: pointer;
}

/* 激活状态样式 */
.menu li.active {
  background: #4CAF50;
  color: white;
}

/* 子菜单缩进 */
.submenu {
  list-style: none;
  padding-left: 20px;
  background: #eee;
}

3. JavaScript 交互逻辑 #

最后写JavaScript来处理点击事件，核心逻辑是：点击子节点时，先清除所有子节点的激活状态，再给当前点击的子节点加上激活状态，同时保留父节点的激活状态：

// 获取所有子菜单节点
const subMenuItems = document.querySelectorAll('.submenu li');

// 给每个子节点绑定点击事件
subMenuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 先移除所有子节点的active类
    subMenuItems.forEach(subItem => subItem.classList.remove('active'));
    // 给当前点击的子节点添加active类
    this.classList.add('active');
    // 父节点的active类保持不变，不用额外处理
  });
});

效果说明 #

• 点击前：父菜单处于激活高亮状态，所有子菜单都是默认样式；
• 点击后：父菜单依然保持激活状态，被点击的子菜单变为高亮，其他子菜单回到默认样式。

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