Bootstrap菜单点击切换.active类异常（含子菜单逻辑）求修复

你的问题出在事件绑定范围和目标判断上——原来的代码给所有<li>（包括子菜单里的子项）都绑定了点击事件，点击子菜单项时会把.active加到子<li>上，而且没正确定位到对应的主菜单项。咱们来一步步修复：

问题根源 #

• 事件绑定在#nav li上，意味着所有层级的li都会触发事件，包括子菜单里的<li>，这就导致点击子项时active被加到子元素上，不符合需求。
• 没有逻辑区分主菜单项和子菜单项，也无法找到子项对应的主菜单项。

修复方案 #

我们需要调整事件绑定的目标，同时增加逻辑来精准定位主菜单项：

调整后的JS代码 #

// 给所有菜单项的<a>标签绑定点击事件（覆盖主菜单和子菜单）
$("#nav a").on("click", function() {
  // 找到当前点击项所属的最外层主菜单项
  const targetMainLi = $(this).closest("#nav > ul > li");
  
  // 移除所有主菜单项的.active类
  $("#nav > ul > li").removeClass("active");
  
  // 给目标主菜单项添加.active类
  targetMainLi.addClass("active");
});

代码说明 #

• 绑定事件到<a>标签更合理：用户实际点击的是链接文本，避免li的空白区域触发不必要的事件。
• .closest("#nav > ul > li")精准定位：不管点击的是主菜单的a，还是子菜单的a，都能找到对应的主层级li。
• 只操作主菜单项的.active类：确保子菜单不会被误加active状态，完全符合你的需求。

可选优化（处理折叠菜单） #

如果你的主菜单项带有Bootstrap的折叠效果（比如Item 1的collapse），可以加上阻止事件冒泡的逻辑，避免点击子项时折叠菜单意外收起：

$("#nav a").on("click", function(e) {
  const targetMainLi = $(this).closest("#nav > ul > li");
  $("#nav > ul > li").removeClass("active");
  targetMainLi.addClass("active");
  
  // 若点击的是子菜单项，阻止事件冒泡到父级折叠按钮
  if ($(this).closest(".collapse").length) {
    e.stopPropagation();
  }
});

这样调整后，不管点击主菜单项还是子菜单项，都会正确地给对应的主菜单项加上.active类，同时移除其他主菜单项的active状态。

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