bootstrap 5 中 navbar-toggler 不响应点击，通常因使用了 bootstrap 4 的旧版 data 属性（如 `data-toggle`），需替换为 `data-bs-toggle` 和 `data-bs-target` 才能正常触发折叠菜单。
在 Bootstrap 5 中，所有 JavaScript 触发的 data 属性均统一增加了 bs- 命名空间前缀，这是与 Bootstrap 4 最关键的不兼容变更之一。若仍沿用 data-toggle="collapse" 和 data-target="#id"，即使引入了正确的 JS 文件，折叠功能也将完全失效——按钮可点击，但菜单不会展开或收起。
✅ 正确写法（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>
⚠️ 注意事项：
- 仅需 bootstrap.min.js 或 bootstrap.bundle.min.js 二者之一：bundle 版本已内置 Popper（用于 tooltip/dropdown 等），无需额外引入 Popper；若使用单独的 bootstrap.min.js，则必须前置加载 Popper（如示例中所示）。
- 确保 DOM 加载后初始化：Bootstrap 5 的 JS 组件默认在 DOMContentLoaded 时自动初始化，但请确认脚本标签位于 </body> 之前，且未被其他 JS 阻塞执行。
- 检查 CSS 与 JS 版本一致性：务必使用同版本的 Bootstrap CSS 和 JS（例如均为 5.3.x），混用 v4/v5 资源将导致行为异常。
- 移除冗余脚本：您原始代码中同时引入了 bootstrap.min.js 和 bootstrap.bundle.min.js，属于重复加载，建议保留其一（推荐 bootstrap.bundle.min.js，更轻量且免去 Popper 手动引入）。
? 补充建议：为提升移动端体验，建议为 <nav> 添加 role="navigation"，并在 .navbar-collapse 上添加 tabindex="-1" 配合键盘导航支持；同时，<ul class="navbar-nav"> 中的 active 类应动态控制（服务端渲染或 JS 切换），避免多个项同时激活。
总结：只需将 data-toggle → data-bs-toggle、data-target → data-bs-target，并确保加载了 Bootstrap 5 的完整 JS 支持，即可让 navbar-toggler 在移动视图下稳定工作。这是升级至 Bootstrap 5 时最常见也最易忽略的迁移要点。
