本文详解如何在 Bootstrap 4.5 中禁用默认的「单开互斥」行为，使侧边栏导航中的多个 .dropdown 可同时保持展开状态，通过监听 hide.bs.dropdown 事件并智能拦截非显式关闭操作来实现。

本文详解如何在 bootstrap 4.5 中禁用默认的「单开互斥」行为，使侧边栏导航中的多个 `.dropdown` 可同时保持展开状态，通过监听 `hide.bs.dropdown` 事件并智能拦截非显式关闭操作来实现。

在 Bootstrap 默认行为中，当一个下拉菜单（.dropdown）被打开时，其他已展开的下拉菜单会自动收起——这是由 Bootstrap 的内部逻辑控制的，旨在保证移动端体验简洁。但在定制化侧边栏（sidemenu）场景中（如本例中将 navbar 改造成垂直折叠菜单），用户往往需要多个子菜单并行展开，以便快速浏览不同模块的选项。直接使用 data-toggle="dropdown" 或原生 JS 触发无法满足该需求，需通过事件干预实现「多开不互斥」。

核心原理：精准拦截隐式关闭

Bootstrap 提供了标准事件钩子，其中 hide.bs.dropdown 在下拉菜单即将关闭前触发。关键在于区分两种关闭意图：

• ✅ 显式关闭：用户点击同一菜单的 toggle 按钮（或按 Esc 键），此时 e.relatedTarget 指向该 toggle 元素；
• ❌ 隐式关闭：用户点击其他菜单的 toggle 按钮，导致当前菜单被强制关闭，此时 e.relatedTarget 指向另一个 toggle 元素。

我们利用这一差异，在 click 事件中记录最新触发的 .dropdown-toggle 元素，再于 hide.bs.dropdown 中比对 relatedTarget —— 若不匹配，即为隐式关闭，调用 e.preventDefault() 阻止其关闭。

完整可运行解决方案

将以下 JavaScript 代码置于 Bootstrap 和 jQuery 加载之后（推荐放在