本文详解如何在 bootstrap 4.5 中禁用默认的「单开互斥」行为使多个 navbar 下拉菜单可同时保持展开状态适用于侧边栏式导航等定制化场景。 本文详解如何在 bootstrap 4.5 中禁用默认的「单开互斥」行为使多个 navbar 下拉菜单可同时保持展开状态适用于侧边栏式导航等定制化场景。在 Bootstrap 4.x 默认行为中当用户点击一个 .dropdown-toggle 触发下拉菜单时框架会自动关闭所有其他已展开的 .dropdown 组件——这是通过内部事件机制实现的「互斥折叠」逻辑。但在侧边栏sidemenu、多层级配置面板或模块化导航等实际项目中常需支持多个下拉菜单并行展开以提升操作效率与用户体验。直接阻止 click 事件传播如 e.stopPropagation()或调用 e.preventDefault() 仅能临时抑制默认跳转但无法真正解耦下拉组件间的关闭联动。正确方案应基于 Bootstrap 提供的原生事件钩子精准干预其关闭逻辑。? 推荐解决方案利用 hide.bs.dropdown 事件拦截非主动关闭Bootstrap 的 Dropdown 组件在即将关闭前会触发 hide.bs.dropdown 事件并通过 e.relatedTarget 指向触发新下拉的元素即另一个 .dropdown-toggle。我们可据此判断 若 e.relatedTarget 是当前 dropdown 的 toggle 元素 → 属于用户主动点击关闭允许关闭 若 e.relatedTarget 是其他 dropdown 的 toggle → 属于「因打开新菜单而被连带关闭」→ 阻止默认行为。配合一个全局变量记录最近一次点击的 toggle 元素即可实现精准控制// 记录最后一次被点击的下拉触发器let lastTrigger null;// 捕获所有下拉触发器的点击事件$(.nav-link.dropdown-toggle).on(click, function() { lastTrigger this;});// 监听所有下拉组件的隐藏前事件$(.dropdown).on(hide.bs.dropdown, function(e) { // 当存在 lastTrigger 且它不等于本次关闭所关联的触发器时 // 说明是「被其他下拉连带关闭」应阻止 if (lastTrigger lastTrigger ! e.relatedTarget) { e.preventDefault(); }});? 注意事项 幻导航网 发现优质实用网站,开启网络探索之旅