Bootstrap 5 导航栏折叠按钮（toggler）不生效的解决方法

bootstrap 5 中 navbar-toggler 失效，通常是因为仍使用了 bootstrap 4 的 `data-toggle` 和 `data-target` 属性；需替换为 `data-bs-toggle` 和 `data-bs-target`，并确保正确引入 bootstrap 5 的 js 及 popper 依赖。

在 Bootstrap 5 中，官方移除了对 jQuery 的依赖，并统一将所有自定义数据属性（data attributes）前缀从 data-* 改为 data-bs-*，这是为了明确标识其属于 Bootstrap 专属行为，避免与其他库冲突。因此，如果你沿用 Bootstrap 4 的写法（如 data-toggle="collapse"），折叠功能将完全失效——按钮可点击，但菜单不会展开或收起。

✅ 正确写法如下（关键修改已加粗）：

同时，请务必检查以下三项依赖是否完整且版本匹配（必须为 Bootstrap 5.x）：

1. Popper.js（必需）：Bootstrap 5 的 tooltip、popover、dropdown 等组件依赖 Popper，navbar collapse 虽不直接依赖，但 bootstrap.min.js 内部引用了它；推荐使用 bootstrap.bundle.min.js（已内置

   

   Popper），或单独引入 Popper + Bootstrap JS；
2. Bootstrap CSS：确保 引入的是 Bootstrap 5 的 bootstrap.min.css；
3. Bootstrap JS：优先使用 bootstrap.bundle.min.js（含 Popper），避免仅引入 bootstrap.min.js（缺少 Popper 会导致部分交互异常）。

? 示例完整结构（精简版）：

⚠️ 常见错误排查清单：

• ❌ 错误：同时引入 bootstrap.min.js 和 bootstrap.bundle.min.js → 造成重复初始化或冲突；
• ❌ 错误：JS 在 底部加载，但 DOM 尚未就绪 → 确保脚本放在 前，或使用 DOMContentLoaded 包裹逻辑；
• ❌ 错误：ID 不匹配 → 检查 data-bs-target 的值（如 #navbarSupportedContent）是否与 .collapse 元素的 id 完全一致（含大小写、空格）；
• ❌ 错误：CSS 被覆盖 → 自定义样式中若设置了 display: none !important 或 height: 0，可能强制隐藏折叠内容。

? 提示：Bootstrap 5 还支持 JavaScript API 手动控制（无需 data 属性）：

const myCollapse = new bootstrap.Collapse('#navbarSupportedContent', {
  toggle: false
});
myCollapse.show(); // 或 .hide(), .toggle()

只要确保 data-bs-* 属性正确、依赖完整、ID 匹配，navbar-toggler 即可立即恢复正常响应式折叠功能。