如何使用jQuery为菜单及子菜单项添加active类？代码失效求助

看起来你在给菜单添加点击激活样式时遇到了几个常见问题，我来帮你一步步排查和修正：

首先，你的代码存在这几个核心问题： #

• 事件绑定对象错误：你把点击事件绑定在了整个#pag的<ul>上，点击任何地方都会触发，而且$(this)指向的是整个列表，不是你点击的具体菜单项。
• 选择器范围不准确：移除类时$("span > label")只能选中直接在span下的label，子菜单里的label没覆盖到，而且没有区分当前菜单组。
• HTML结构不规范：<ul>的直接子元素应该是<li>，你现在直接放了<a>和<span>，这会导致事件冒泡和DOM结构异常，影响点击事件的处理。
• 事件冒泡未处理：点击子菜单项时，会触发父元素的点击事件，导致样式混乱。

修正后的完整代码： #

HTML部分（规范结构）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.activ { color: red; }
/* 可选：给可点击项加光标样式，提示可点击 */
.list-group-item, .dropdown-item { cursor: pointer; }
</style>

<ul id="pag" class="list-group">
  <li class="list-group-item">Choose</li>
  <li class="list-group-item">
    <label for="tbavtive1" class="activ">Main1</label>
    <ul class="dropdown-menu">
      <li><label class="dropdown-item Stu" for="tbavtive2">Lorem 1</label></li>
    </ul>
  </li>
  <li class="list-group-item">
    <label for="tbavtive9" class="Stu">Main2</label>
    <ul class="dropdown-menu">
      <li><label class="dropdown-item Stu" for="tbavtive10">Lorem 2</label></li>
    </ul>
  </li>
</ul>

jQuery部分（精准绑定事件）：

$(document).ready(function() {
  // 给所有可点击的菜单项绑定点击事件
  $('#pag label').click(function(e) {
    // 阻止事件冒泡，避免触发父元素的点击事件
    e.stopPropagation();
    
    // 移除所有菜单项的activ类
    $('#pag label').removeClass('activ');
    
    // 给当前点击的项添加activ类
    $(this).addClass('activ');
  });
});

代码解释： #

1. 规范HTML结构：把所有菜单内容放在<li>里，符合<ul>的DOM规范，避免不必要的事件问题。
2. 精准事件绑定：直接给所有<label>绑定点击事件，这样$(this)就指向你点击的具体菜单项。
3. 阻止事件冒泡：用e.stopPropagation()防止点击子菜单时触发父菜单的点击事件，避免样式被意外覆盖。
4. 全局移除+当前添加：先移除所有相关label的activ类，再给当前点击的项添加，确保只有一个激活项。

如果你的子菜单需要展开/收起功能，还可以在事件里添加切换逻辑，但目前的代码已经能解决你核心的“点击添加active类”的问题啦。

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