我来帮你搞定这个子菜单的问题！根据你的描述，核心问题确实出在全局移除所有sub-menu的menu-open类这一步——它会把你刚要展开的目标子菜单也一并"关掉"，导致类无法正确添加。下面是具体的诊断和修正方案：

问题根源分析 #

你的原有代码逻辑大概是这样的：点击任意带子菜单的li时，先把所有sub-menu的menu-open类都移除，再给当前点击的子菜单加类。但这个操作会导致：如果事件触发顺序或者选择器范围没控制好，刚要添加的类会被前面的全局移除操作覆盖，最终子菜单还是没有menu-open类。

修正后的jQuery代码 #

$(document).ready(function() {
  // 给所有包含子菜单的菜单项绑定点击事件
  $('.menu-item-has-children').on('click', function(e) {
    // 阻止事件冒泡，避免父级菜单项的点击事件被误触发
    e.stopPropagation();

    // 获取当前点击项对应的二级子菜单
    const $currentSubMenu = $(this).find('.sub-menu');

    // 只关闭【当前点击项的兄弟节点】下的所有子菜单，而非全局所有
    $(this).siblings('.menu-item-has-children').find('.sub-menu').removeClass('menu-open');

    // 切换当前子菜单的展开/收起状态（自动添加/移除menu-open类）
    $currentSubMenu.toggleClass('menu-open');
  });

  // 可选优化：点击页面其他区域时自动收起所有子菜单
  $(document).on('click', function(e) {
    if (!$(e.target).closest('.menu-item-has-children').length) {
      $('.sub-menu').removeClass('menu-open');
    }
  });
});

代码关键说明 #

1. 阻止事件冒泡：e.stopPropagation()避免点击子菜单内部元素时，触发父级li的点击事件，导致菜单状态混乱。
2. 精准关闭其他菜单：使用siblings()只针对当前点击项的兄弟节点操作，不会影响当前要展开的子菜单。
3. 切换类状态：toggleClass()替代单纯的addClass()，实现点击一次展开、再点击一次收起的交互，更符合用户习惯。
4. 页面点击收起：额外添加的全局点击监听，提升用户体验，点击菜单外区域自动收起所有子菜单。

额外注意事项 #

• 确保WordPress菜单的HTML结构正确：menu-item-has-children类必须加到包含子菜单的li上，sub-menu类要正确应用到二级菜单的ul标签。
• 如果菜单是动态加载的（比如通过AJAX渲染），需要把事件委托到静态父元素上，比如：

  $('.main-navigation').on('click', '.menu-item-has-children', function(e) {
    // 同上逻辑
  });
  

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