本文详解如何修改 jquery 代码，使多个导航子菜单可同时保持打开状态，仅在点击其对应父项时才切换自身显隐，避免传统“单开模式”导致的其他菜单意外关闭。
本文详解如何修改 jquery 代码，使多个导航子菜单可同时保持打开状态，仅在点击其对应父项时才切换自身显隐，避免传统“单开模式”导致的其他菜单意外关闭。
在构建多级侧边栏导航（如后台管理系统）时，常需支持用户并行展开多个子菜单——例如同时查看“Data”和“Account”下的选项，而非强制“一开一关”。默认实现中，$('.submenu.open').removeClass('open').slideUp() 这一行会全局关闭所有已开菜单，破坏了用户体验。
要实现子菜单独立控制，核心思路是：移除全局关闭逻辑，仅操作当前触发事件的兄弟 .submenu 元素。以下是优化后的完整解决方案：
✅ 正确的 jQuery 逻辑（关键改动）
$(() => {
$('.parent-link').on('click', function(e) {
e.preventDefault();
const $submenu = $(this).siblings('.submenu'); // 精准定位本级 submenu
if ($submenu.hasClass('open')) {
$submenu.removeClass('open').slideUp(200); // 收起自身
} else {
$submenu.addClass('open').slideDown(200); // 展开自身
// ❌ 不再执行 $('.submenu.open').slideUp() —— 这是原问题根源
}
});
// 初始化：根据当前路由高亮并展开对应 submenu
const currentRoute = "{{ Request::url() }}";
$('.child-link').each(function() {
if ($(this).attr('href') === currentRoute) {
$(this).addClass('active');
$(this).closest('.submenu')
.addClass('open')
.slideDown(200);
$(this).closest('.nav-item')
.find('.parent-link')
.addClass('active');
}
});
});? CSS 补充说明
确保样式兼容动画效果（推荐使用 display: none/block 配合 slideUp/slideDown）：
.submenu {
display: none;
overflow: hidden;
}
.submenu.open {
display: block;
}
/* 可选：添加过渡平滑感（需配合 height 动画，但 slideDown 已内置） */⚠️ 注意事项
-
不要混用
display: none和visibility: hidden：.slideUp()依赖display属性控制显隐，若 CSS 中误设visibility，会导致动画失效。 -
避免重复绑定：确保该脚本只执行一次（如置于
@stack('scripts')底部或使用once事件监听器）。 -
移动端适配建议：可增加
touchstart事件支持，或使用e.preventDefault()防止 iOS 点击延迟。 -
无障碍增强：为
.parent-link添加aria-expanded属性，并在 JS 中同步更新（如$(this).attr('aria-expanded', $submenu.hasClass('open'))），提升屏幕阅读器体验。
通过以上调整，每个 .submenu 完全自治：点击“Data”展开其列表，再点击“Account”将同时显示两个子菜单；再次点击任一父链接，则仅收起对应内容。结构清晰、行为可预测，显著提升复杂导航的可用性。
立即学习“前端免费学习笔记（深入）”；
