WordPress移动端导航仅切换第一层子菜单实现问题

问题根因 #

你遇到的异常是事件冒泡导致的：你给所有层级的.menu-item-has-children都绑定了点击事件，子导航的点击事件会向上冒泡传递到父级导航元素，触发父级的折叠逻辑，最终出现点击子项时整个菜单回退的问题。

修复代码 #

// 仅给第一层带下拉的主导航项绑定切换事件
$(".menu__nav__list > .menu-item-has-children").click(function () {
  if ($("body").data("menu") === "active") {
    // 切换时直接展示/隐藏该主导航下所有层级的子菜单
    $(this).find(".sub-menu").stop().slideToggle(500, "swing");
  }
});

// 阻止所有子导航内元素的点击事件向上冒泡
$(".sub-menu *").click(function (e) {
  e.stopPropagation();
});

实现效果 #

• 只有点击第一层主导航项时才会触发对应子菜单的展开/折叠
• 点击任意层级的子导航项都不会触发菜单折叠，正常执行跳转逻辑
• 主导航展开后会一次性显示其下所有层级的子导航，无需逐级点击展开

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