bootstrap怎样实现响应式的多级侧边菜单

作者：袖梨 2026-06-26

原生 Bootstrap 侧边菜单不支持多级折叠，因其 Accordion 和 Navbar 未内置嵌套响应式逻辑；需手动用 JavaScript 控制每级 collapse 实例，并在移动端断点时自动收起所有子菜单。

为什么原生 Bootstrap 侧边菜单不支持多级折叠

bootstrap 官方的 accordion 和 navbar 都没内置「多级嵌套 + 响应式收起」的侧边菜单逻辑。你直接套用 collapse 类，第二级菜单会和第一级共用同一个 data-bs-target，点开一级时二级也跟着展开，根本没法独立控制。

真正能跑通的路径只有一条：手动接管折叠状态，用 JavaScript 控制每个子菜单的 show/hide，同时确保移动端自动收起、桌面端默认展开（或按需保留）。

别依赖 data-bs-toggle="collapse" 套娃——它不处理嵌套层级
移动端（sm 以下）必须强制收起所有子菜单，否则侧边栏撑出屏幕
桌面端如果默认展开全部，会破坏信息密度；建议只展开当前激活项的祖先路径

怎么用 Bootstrap 5 的 Collapse API 实现逐级控制

核心是放弃纯 HTML 触发，改用 JS 调用 bootstrap.Collapse 构造函数，给每级 div.collapse 单独实例化，并监听父级按钮的点击事件。

示例关键结构：

<li>  <a href="#" class="nav-link" data-bs-toggle="collapse" data-bs-target="#menu1">仪表盘</a>  <div class="collapse" id="menu1">    <ul class="nav flex-column">      <li><a href="#" class="nav-link">概览</a></li>      <li>        <a href="#" class="nav-link" data-bs-toggle="collapse" data-bs-target="#submenu1">报表</a>        <div class="collapse" id="submenu1">          <ul class="nav flex-column">            <li><a href="#" class="nav-link">月度</a></li>          </ul>        </div>      </li>    </ul>  </div></li>

然后加这段 JS（放在 </body> 前）：

document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(btn => {  btn.addEventListener('click', function (e) {    e.preventDefault();    const target = document.querySelector(this.dataset.bsTarget);    if (!target) return;    // 只关闭兄弟节点，不关自己    const siblings = target.closest('ul').querySelectorAll('.collapse:not(#' + target.id + ')');    siblings.forEach(s => {      const instance = bootstrap.Collapse.getInstance(s);      if (instance && instance._isShown) instance.hide();    });    // 再操作当前目标    const instance = bootstrap.Collapse.getOrCreateInstance(target);    instance.toggle();  });});

每次点击只 toggle 当前目标，且先 hide 同级其他 collapse，避免多个子菜单同时展开
必须用 getOrCreateInstance，否则重复点击可能报 Cannot read property 'toggle' of null
移动端需要额外监听 window.matchMedia('(max-width: 576px)')，在断点切换时主动 hide() 所有子菜单

响应式断点下如何自动收起子菜单

Bootstrap 的 collapse 默认不随视口变化重置状态。你缩放浏览器窗口，之前展开的二级菜单不会自动收起，导致小屏下内容溢出。

解决方案是监听 resize 事件，但不能高频触发——用防抖包装，且只在跨过 sm 断点时执行：

let mediaQuery = window.matchMedia('(max-width: 576px)');function handleCollapseOnResize() {  if (mediaQuery.matches) {    // 小屏：全部收起    document.querySelectorAll('.collapse.show').forEach(el => {      bootstrap.Collapse.getInstance(el)?.hide();    });  }}mediaQuery.addListener(handleCollapseOnResize);handleCollapseOnResize(); // 初始化执行一次

别用 window.addEventListener('resize', ...)——太频繁，容易卡顿
matchMedia 是浏览器原生 API，兼容性好（IE10+），比读 getComputedStyle 可靠
注意：hide() 调用前必须检查实例是否存在，否则在未初始化的元素上调用会报错

为什么 CSS 要额外处理子菜单的 padding 和 border

Bootstrap 默认的 .nav .nav 嵌套样式对齐混乱：二级菜单的 <li> 会顶到一级菜单左侧，视觉上分不清层级，用户点错概率高。

最简修复是加一层 CSS（放在自定义样式表里，且在 Bootstrap CSS 之后）：

.nav.flex-column .nav {  padding-left: 1rem;}.nav.flex-column .nav .nav {  padding-left: 1.5rem;}.nav .nav-link[data-bs-toggle="collapse"]::after {  content: "▶";  font-size: 0.7em;  margin-left: 0.5rem;  transition: transform 0.2s;}.nav .nav-link[data-bs-toggle="collapse"].collapsed::after {  transform: rotate(-90deg);}