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

小丽大大_6132

发布时间：2026-04-13 16:58:06

857人浏览过

来源于php中文网

原创

原生 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 默认不随视口变化重置状态。你缩放浏览器窗口，之前展开的二级菜单不会自动收起，导致小屏下内容溢出。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

解决方案是监听 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);
}