Bootstrap 5 导航栏折叠按钮（Toggler）失效的解决方案

bootstrap 5 中 navbar 折叠按钮不响应，通常因使用了 bootstrap 4 的旧版 data 属性（如 `data-toggle`），而 bootstrap 5 已统一改为带 `bs-` 前缀的新属性（如 `data-bs-toggle`），同时需确保正确引入 popper 和 bootstrap js。

在 Bootstrap 5 中，JavaScript 插件的 DOM 属性命名已全面升级为带 data-bs-* 前缀的格式，这是与 Bootstrap 4 最关键的兼容性变更之一。若你沿用旧写法（如 data-toggle="collapse" 或 data-target="#nav"），浏览器将无法识别并绑定事件，导致移动端导航菜单点击无反应。

✅ 正确写法（Bootstrap 5）：

<button 
  class="navbar-toggler" 
  type="button" 
  data-bs-toggle="collapse" 
  data-bs-target="#navbarSupportedContent" 
  aria-controls="navbarSupportedContent" 
  aria-expanded="false" 
  aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

⚠️ 常见错误排查清单：

• ❌ 使用 data-toggle / data-target → ✅ 必须改为 data-bs-toggle / data-bs-target
• ❌ 仅引入 bootstrap.min.js → ✅ 必须先引入 Popper.js（或使用 bootstrap.bundle.min.js，它已内置 Popper）
• ❌ 脚本加载顺序错误（如 JS 在 DOM 渲染前执行）→ ✅ 确保 <script> 标签置于 </body> 闭合前，或添加 defer
• ❌ ID 不匹配：data-bs-target 指向的 #navbarSupportedContent 必须与 .collapse 元素的 id 完全一致（区分大小写、无空格）

? 推荐的最小依赖引入方式（推荐使用 bundle 版本）：

Peppertype.ai

高质量AI内容生成软件，它通过使用机器学习来理解用户的需求。

下载

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JS（含 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

? 额外提示：

• Bootstrap 5 不再依赖 jQuery，切勿混入 jQuery 初始化代码；
• 若自定义 JavaScript 控制折叠状态，请使用 bootstrap.Collapse 实例方法，例如：

  const myCollapse = new bootstrap.Collapse('#navbarSupportedContent', {
    toggle: true
  });

遵循以上规范后，移动端点击汉堡图标即可正常展开/收起导航菜单。务必以官方文档 Bootstrap 5 JavaScript 状态切换 为准，避免参考过时的 Bootstrap 4 教程。