本文讲解如何修改 jquery 代码，使多个导航子菜单可同时保持打开状态，仅在点击其对应父项时才切换自身显隐，避免默认的“单开模式”行为。
本文讲解如何修改 jquery 代码，使多个导航子菜单可同时保持打开状态，仅在点击其对应父项时才切换自身显隐，避免默认的“单开模式”行为。
在构建多级侧边栏导航（如后台管理菜单）时，常遇到一个交互痛点：点击一个父菜单项展开其子菜单后，再点击另一个父项，前一个子菜单却自动收起——这源于常见写法中全局关闭 .submenu.open 的逻辑。要实现各子菜单状态相互独立（即“多开不互斥”），关键在于移除对其他子菜单的强制关闭操作，仅控制当前触发元素关联的子菜单。
✅ 正确实现逻辑
核心修改点在于：取消 $('.submenu.open').removeClass('open').slideUp(); 这一行全局关闭语句。原代码中该行会无差别收起所有已打开的子菜单；而新逻辑只需聚焦于当前点击的 .parent-link 对应的 .submenu，判断其状态并单独切换：
$(() => {
$('.parent-link').on('click', function(e) {
e.preventDefault();
const $submenu = $(this).siblings('.submenu');
if ($submenu.hasClass('open')) {
$submenu.removeClass('open').slideUp(200); // 平滑收起
} else {
$submenu.addClass('open').slideDown(200); // 平滑展开
}
});
// 初始化：根据当前 URL 自动激活对应子菜单（保留原有逻辑）
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 注意事项
确保样式支持独立控制。以下为推荐精简版 CSS（移除了冗余规则，避免 display: block 冲突）：
.submenu {
display: none;
}
.submenu.open {
display: block;
}⚠️ 注意：不要同时定义 .submenu.active { display: block; }，除非你明确需要 active 类用于其他用途（如高亮）。若仅用于展开控制，统一使用 .open 类即可，避免样式覆盖混乱。
立即学习“前端免费学习笔记（深入）”；
? 补充说明与最佳实践
-
事件委托非必需：当前结构中
.parent-link是静态元素，直接绑定click即可；若菜单动态生成，建议改用事件委托：$(document).on('click', '.parent-link', function(e) { /* ... */ }); -
动画性能优化：
.slideDown()/.slideUp()默认使用 jQuery 内置动画，如需更高性能或更精细控制，可替换为 CSStransition+max-height，但需注意max-height: 0到max-height: 300px的过渡需预设合理值。 -
无障碍增强（可选）：为提升可访问性，建议在
.parent-link上添加aria-expanded属性，并同步更新：const isExpanded = $submenu.hasClass('open'); $(this).attr('aria-expanded', !isExpanded);
通过以上调整，每个子菜单将完全独立响应用户操作：点击「Data」展开其列表，再点击「Account」也会展开——两者可共存；再次点击任一父项，则仅收起其直属子菜单。这种设计显著提升多层级导航的可用性与用户体验。
