点击父菜单切换子菜单并关闭其他子菜单功能异常排查

问题分析 #

当前代码的核心问题是：点击父菜单时，先移除了所有子菜单的visible类，再对当前子菜单执行toggleClass。这就导致原本已展开的子菜单，会被重新添加visible类，无法实现点击关闭的效果。

修复方案 #

修复后的jQuery代码 #

// 主菜单子菜单切换
$(".menu-item-has-children > a").click(function(e) {
  // 获取当前点击项对应的子菜单
  const $currentSubmenu = $(this).next(".sub-menu");

  // 关闭所有非当前的子菜单
  $(".sub-menu").not($currentSubmenu).removeClass('visible');

  // 切换当前子菜单的显示状态
  $currentSubmenu.toggleClass('visible');

  // 阻止a标签默认跳转行为
  e.preventDefault();
});

代码逻辑说明 #

1. 首先定位到当前点击的父菜单对应的子菜单元素
2. 只关闭其他已展开的子菜单，保留当前子菜单的状态
3. 对当前子菜单执行toggleClass，实现「展开→关闭」或「关闭→展开」的切换

原HTML代码无需修改 #

<ul>
    <li class="menu-item-has-children">
        <a href="#">Services</a>
        <ul class="sub-menu">
            <li><a href="#">Thing 1</a></li>
            <li><a href="#">Thing 2</a></li>
        </ul>
    </li>
    <li class="menu-item-has-children">
        <a href="#">Services</a>
        <ul class="sub-menu visible">
            <li><a href="#">Widget 1</a></li>
            <li><a href="#">Widget 2</a></li>
        </ul>
    </li>
</ul>

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