WordPress多级菜单JavaScript点击显示异常问题求助

核心问题是事件绑定范围不足——直接给li绑定点击事件时，仅会对页面加载时已存在的第一级li生效，深层嵌套的li不在初始绑定范围内，所以无法触发显示逻辑。用事件委托就能解决这个问题。

解决方案：事件委托实现多级菜单触发 #

利用事件冒泡机制，把点击事件绑定到菜单的根容器上，不管嵌套多少层的子菜单，点击事件都会冒泡到根容器并触发处理逻辑。

修正后的jQuery代码 #

假设你的菜单根容器选择器是.main-menu（根据实际HTML结构调整）：

$(document).ready(function() {
  // 绑定到根菜单容器，监听所有含子菜单的li点击
  $('.main-menu').on('click', 'li:has(> ul)', function(e) {
    // 阻止事件冒泡，避免父级菜单误触发
    e.stopPropagation();
    // 切换当前li下的子ul显示状态
    $(this).children('ul').toggle();
  });
});

关键细节说明 #

• li:has(> ul)：精准匹配包含直接子菜单ul的li，避免无菜单的项触发事件。
• e.stopPropagation()：必须添加，否则点击深层子菜单时，事件会冒泡到父级li，导致父菜单也跟着切换显示状态，造成交互混乱。
• 确保CSS默认把子菜单设为display: none，.toggle()才能正常实现显示/隐藏切换。

额外优化建议 #

• 给有子菜单的li手动加个类（比如.has-submenu），选择器可以更清晰：'li.has-submenu'，提升匹配效率。
• 若需点击菜单外部关闭所有子菜单，可补充以下代码：

$(document).on('click', function(e) {
  if (!$('.main-menu').is(e.target) && $('.main-menu').has(e.target).length === 0) {
    $('.main-menu ul').hide();
  }
});

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