Bootstrap 5 中 Navbar 折叠菜单无法展开的解决办法

Bootstrap 5 已移除对 jQuery 的依赖，且所有 data 属性均需使用 data-bs-* 命名约定（如 data-bs-toggle），而非旧版 Bootstrap 4 的 data-toggle；若未更新属性名，折叠功能将完全失效。

bootstrap 5 已移除对 jquery 的依赖，且所有 data 属性均需使用 `data-bs-*` 命名约定（如 `data-bs-toggle`），而非旧版 bootstrap 4 的 `data-toggle`；若未更新属性名，折叠功能将完全失效。

在 Bootstrap 5 中，JavaScript 组件的触发机制已彻底重构：所有交互式组件（如 Collapse、Dropdown、Modal）均通过 data-bs-* 属性进行声明式初始化，*不再支持 `data-（如data-toggle）**。你当前的 HTML 仍沿用 Bootstrap 4 的语法，导致navbar-toggler` 点击后无响应——这是最常见的迁移遗漏问题。

✅ 正确的 Bootstrap 5 写法

请将所有 data-toggle 和 data-target 替换为对应的 data-bs-* 属性：

<button  class="navbar-toggler"  type="button"  data-bs-toggle="collapse"        <!-- ✅ 关键修复 -->  data-bs-target="#navbarNavAltMarkup"  <!-- ✅ -->  aria-controls="navbarNavAltMarkup"  aria-expanded="false"  aria-label="Toggle navigation">  <span class="navbar-toggler-icon"></span></button><!-- Dropdown 按钮同理 --><button  class="btn btn-secondary dropdown-toggle"  type="button"  id="dropdownMenuButton"  data-bs-toggle="dropdown"        <!-- ✅ -->  aria-haspopup="true"  aria-expanded="false">  Seasons</button>

⚠️ 注意事项与优化建议

• 移除 jQuery：Bootstrap 5 的 bootstrap.bundle.min.js 已内置 Popper（用于 Tooltip/Dropdown 定位），无需再引入 jquery.min.js。请从 angular.json 的 scripts 数组中删除：

  "scripts": [  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" // ✅ 保留此项即可  // "node_modules/jquery/dist/jquery.min.js", ← 删除此行]

• ID 唯一性校验：你的 HTML 中存在两个 id="navbarNavAltMarkup" 的 <div> 元素（分别用于左侧导航和右侧认证按钮），这违反 HTML 规范，且会导致 data-bs-target 行为不可预测。应为左右两部分分配不同 ID，例如：

  <!-- 左侧导航 --><div class="collapse navbar-collapse" id="navbarNavLeft">  <!-- ... --></div><!-- 右侧按钮 --><div class="collapse navbar-collapse justify-content-end" id="navbarNavRight">  <!-- ... --></div>

  并同步更新 data-bs-target 值（如 #navbarNavLeft 和 #navbarNavRight）。

• 确保样式与脚本加载顺序：确认 bootstrap.min.css 在 styles 中前置，bootstrap.bundle.min.js 在 scripts 中最后加载（Angular CLI 默认满足）。

? 验证是否生效

打开浏览器开发者工具（F12）→ Elements 标签页，点击切换按钮后检查对应 .collapse 元素是否动态添加了 show 类；若无，请检查控制台是否有 Uncaught ReferenceError: bootstrap is not defined 错误——这通常意味着 bootstrap.bundle.min.js 未正确加载。

完成以上修改后，小屏下的折叠菜单即可正常展开/收起，无需任何额外 JavaScript 初始化代码。