如何用jQuery实现导航li点击 为对应子菜单ul li添加/移除类名

问题背景 #

在做WordPress自定义导航菜单适配时，桌面端通过鼠标悬停主菜单项唤起子菜单的交互，在移动端触屏场景下无法生效，需要实现点击主菜单项展开对应子菜单的效果。

现有菜单结构 #

<ul class="navigation__list">
 <li class="navigation__link"><a>Main Menu Item</a>
  <ul class="navigation_item--submenu">
   <li class="navigation__link"><a>Sub Menu Item</a>
   <li class="navigation__link"><a>Sub Menu Item</a>
   <li class="navigation__link"><a>Sub Menu Item</a>
   <li class="navigation__link"><a>Sub Menu Item</a>
  </ul>
 </li>
</ul>

注意：现有HTML结构存在标签未闭合问题，正式使用前需要补全所有<li>标签的闭合标签，避免DOM结构异常影响交互。

原有代码问题分析 #

你之前写的jQuery代码无法正常运行，核心原因有3个：

• 选择器全局匹配所有子菜单下的li元素，没有和当前点击的主菜单项做关联，会出现点一个菜单所有子菜单同时切换的问题
• 类名挂载目标错误，控制显隐的show-menu类应该加在子菜单容器<ul class="navigation_item--submenu">上，而不是子菜单内部的li元素上
• 没有做事件冒泡阻止，点击子菜单项时会同时触发父级li的点击事件，导致子菜单刚展开就被收起

可直接复用的实现方案 #

第一步：补充CSS显隐样式 #

/* 移动端默认隐藏子菜单，桌面端hover样式可保留原有逻辑 */
.navigation_item--submenu {
  display: none;
}
.navigation_item--submenu.show-menu {
  display: block;
}

第二步：替换原有jQuery逻辑 #

jQuery(document).ready(function($){
  // 只给带子菜单的主菜单项绑定点击事件，减少无效监听
  $('.navigation__list li:has(.navigation_item--submenu)').on('click', function(e){
    // 阻止事件向上冒泡，避免点击子菜单时触发父级的点击逻辑
    e.stopPropagation();
    // 找到当前点击项对应的直属子菜单
    const activeSubmenu = $(this).children('.navigation_item--submenu');
    // 切换当前子菜单的显隐状态
    activeSubmenu.toggleClass('show-menu');
    // 关闭其他已展开的子菜单，避免同时展开多个下拉
    $('.navigation_item--submenu').not(activeSubmenu).removeClass('show-menu');
  });

  // 点击页面空白区域时，自动收起所有展开的子菜单
  $(document).on('click', function(){
    $('.navigation_item--submenu').removeClass('show-menu');
  });
});

效果说明 #

• 点击带下拉的主菜单项，即可展开/折叠对应子菜单
• 同一时间只会展开一个子菜单，交互逻辑更符合移动端使用习惯
• 点击子菜单项、页面空白区域都不会出现交互异常
• 原有桌面端hover逻辑不受影响，可正常使用

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