本文讲解如何使用 jQuery 实现侧边栏多级菜单的“单开模式”——点击某个父项的折叠触发器（如 ）时，仅展开对应子菜单，同时自动关闭其余所有已展开的子菜单。

本文讲解如何使用 jquery 实现侧边栏多级菜单的“单开模式”——点击某个父项的折叠触发器（如 ``）时，仅展开对应子菜单，同时自动关闭其余所有已展开的子菜单。

在构建管理后台或导航密集型 Web 应用时，侧边栏的可折叠菜单是常见需求。理想交互应满足：每次只允许一个子菜单处于展开状态，即“排他式展开”（Exclusive Toggle）。但初学者常误用 $(el).not(el) 导致逻辑失效——该写法始终返回空集合（因为元素不可能不等于自身），无法正确选取兄弟节点。

✅ 正确实现思路

核心在于精准定位目标 <li> 元素后，对其兄弟节点执行收起操作，而非错误地对自身取反：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

• 使用 .siblings() 获取同级所有 .navigation-submenu 项；
• 或使用类选择器配合 .not($target) 精准排除目标（推荐前者，语义更清晰、性能更优）；
• 统一移除 active 类并收起 .block-navigation-submenu；
• 再对当前点击项执行 toggleClass("active") 和 slideToggle()。

✅ 完整可运行代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.block-navigation-submenu { display: none; }
.navigation-submenu.active .block-navigation-submenu { display: block; }
.navigation-submenu.active a { color: #e74c3c; }
</style>

<ul class="block-navigation" id="sidebar-navigation">
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
      School Affairs
      <em>▼</em>
    </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item"><a href="#"><span>School Affairs</span></a></li>
      <li class="navigation-item"><a href="#"><span>National Schools</span></a></li>
      <li class="navigation-item"><a href="#"><span>Teacher Transfers</span></a></li>
    </ul>
  </li>
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
      Administration
      <em>▼</em>
    </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item"><a href="#"><span>HR Management</span></a></li>
      <li class="navigation-item"><a href="#"><span>Finance</span></a></li>
      <li class="navigation-item"><a href="#"><span>Facilities</span></a></li>
    </ul>
  </li>
</ul>

<script>
$("#sidebar-navigation li.navigation-submenu > a > em").on("click", function(e) {
  e.preventDefault();

  // 定位到当前被点击的 submenu 的父级 <li>
  const $targetLi = $(this).closest("li.navigation-submenu");

  // 收起所有兄弟 submenu，并移除 active 类
  $targetLi.siblings(".navigation-submenu")
    .removeClass("active")
    .find(".block-navigation-submenu")
      .slideUp(200);

  // 切换当前 submenu 的状态
  $targetLi.toggleClass("active");
  $targetLi.find(".block-navigation-submenu").slideToggle(200);
});
</script>

⚠️ 关键注意事项

• 避免 $(el).not(el) 陷阱：此写法永远返回空 jQuery 对象，应改用 .siblings() 或 $(".navigation-submenu").not($el)；
• 推荐使用 .closest()：比 .parent().parent('li') 更健壮，不受 HTML 结构微调影响；
• 动画同步性：.slideUp() 与 .slideToggle() 的持续时间建议统一（如均设为 200），避免视觉撕裂；
• CSS 配合：确保 .block-navigation-submenu 默认 display: none，并通过 .active 类控制显隐逻辑（而非仅依赖 JS 显示）；
• 无障碍增强（可选）：可为 <em></em> 添加 aria-expanded 属性，并在 JS 中同步更新，提升可访问性。

通过以上实现，你将获得一个行为稳定、结构清晰、易于维护的单开式折叠菜单系统，适用于各类中后台导航场景。