单开子菜单功能异常求助：点击无法关闭始终保持打开状态

原代码的核心问题出在这一行：

$(".sub-menu ul").not($(this)).hide();

这里的$(this)指向被点击的<a>标签，而.sub-menu ul是子菜单列表元素，两者不属于同一DOM集合，所以not($(this))根本无法排除当前要操作的子菜单。每次点击时，所有子菜单（包括当前已展开的）都会被先隐藏，紧接着又执行slideToggle把当前子菜单重新展开，导致无法关闭；箭头图标的切换也会因为这个重复操作出现状态混乱。

HTML部分（无需修改） #

<nav class='animated flipInX'>
  <ul>
    <li>
      <a href='#'>
        <div class='fa fa-home'></div>
      </a>
    </li>
    <li>
      <a href='#'>
        About
      </a>
    </li>
    <li class='sub-menu'>
      <a href='#'>
        Products
        <i class='fa fa-angle-down'></i>
      </a>
      <ul>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
      </ul>
    </li>
    <li class='sub-menu'>
      <a href='#'>
        Services
        <i class='fa fa-angle-down'></i>
      </a>
      <ul>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a href='#'>
        Contact Us
      </a>
    </li>
  </ul>
</nav>

jQuery部分 #

// 初始隐藏所有子菜单
$(".sub-menu ul").hide();

$(".sub-menu a").click(function (e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    
    // 获取当前操作的DOM元素
    const $currentLink = $(this);
    const $currentSubMenu = $currentLink.parent(".sub-menu");
    const $currentUl = $currentSubMenu.children("ul");
    const $currentIcon = $currentLink.find("i.fa");
    
    // 处理其他子菜单：隐藏并重置箭头为向下状态
    $(".sub-menu").not($currentSubMenu).each(function() {
        $(this).children("ul").hide();
        $(this).find("i.fa").removeClass("fa-angle-up").addClass("fa-angle-down");
    });
    
    // 切换当前子菜单的显示/隐藏状态
    $currentUl.slideToggle(200);
    // 切换当前箭头的方向
    $currentIcon.toggleClass("fa-angle-up fa-angle-down");
});

• 精准排除当前子菜单：通过$(".sub-menu").not($currentSubMenu)定位其他子菜单，避免误操作当前菜单
• 统一其他箭头状态：隐藏其他子菜单时，同步把它们的箭头改回向下，保证状态一致性
• 阻止默认跳转：添加e.preventDefault()避免点击a标签触发锚点跳转
• 清晰的DOM定位：提前获取当前操作的所有相关元素，简化逻辑并减少重复DOM查询

内容的提问来源于stack exchange，提问作者Sebastián Avendaño González