无法移除菜单项class：点击下拉菜单内锚点链接后菜单未关闭如何解决

问题根因 #

你之前的代码冲突核心有两个：

1. 事件冒泡：点击dropdown触发toggle添加active类后，事件会向上冒泡触发你绑定的.nav_item.active > *点击事件，直接把刚加上的active类移除
2. 静态绑定失效：页面初始化时.nav_item没有active类，你直接绑定的选择器匹配不到元素，后续新增active类时事件也不会自动绑定

修复代码 #

// 原有toggle逻辑保留，新增阻止冒泡避免冲突
$('.dropdown').click(function (e) {
    e.stopPropagation();
    $(this).closest('.nav_item').toggleClass('active');
});

// 用事件委托绑定子菜单内所有链接点击事件，不会和toggle逻辑冲突
$('.secondarynav').on('click', 'a', function(e) {
    e.stopPropagation();
    $(this).closest('.nav_item.active').removeClass('active');
    // 如果你需要阻止锚点跳转可以加 e.preventDefault()，正常锚点滚动不需要就删除
});

// 可选补充：点击菜单外任意区域自动关闭下拉
$(document).click(function() {
    $('.nav_item.active').removeClass('active');
});

逻辑说明 #

• 给dropdown的点击事件加e.stopPropagation()，避免点击dropdown时冒泡到document触发外部关闭逻辑
• 子菜单的点击事件单独委托给.secondarynav，只匹配内部的a标签，点击时直接移除active类，且阻止冒泡到上层的dropdown元素，不会触发toggle逻辑
• 事件委托的写法兼容动态新增的子菜单链接，不需要重复绑定事件

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