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）：
- Popper.js（必需）：Bootstrap 5 的 tooltip、popover、dropdown 等组件依赖 Popper，navbar collapse 虽不直接依赖，但 bootstrap.min.js 内部引用了它；推荐使用 bootstrap.bundle.min.js（已内置 Popper），或单独引入 Popper + Bootstrap JS；
- Bootstrap CSS：确保 引入的是 Bootstrap 5 的 bootstrap.min.css；
- Bootstrap JS：优先使用 bootstrap.bundle.min.js（含 Popper），避免仅引入 bootstrap.min.js（缺少 Popper 会导致部分交互异常）。
? 示例完整结构（精简版）：
Bootstrap 5 Navbar
⚠️ 常见错误排查清单：
- ❌ 错误：同时引入 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 即可立即恢复正常响应式折叠功能。
