本文讲解如何使用 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>
<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 中同步更新，提升可访问性。
通过以上实现，你将获得一个行为稳定、结构清晰、易于维护的单开式折叠菜单系统，适用于各类中后台导航场景。
