Bootstrap 5 Navbar折叠菜单无法展开的解决方案

先确认一个关键前提：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-* 属性就能解决问题：

  data-bs-target="#navbarNavAltMarkup"  
  aria-controls="navbarNavAltMarkup"
  aria-expanded="false"
  aria-label="Toggle navigation">
  




  aria-haspopup="true"
  aria-expanded="false">
  Seasons

注意事项与优化建议

• 移除 jQuery：Bootstrap 5 自带的 bootstrap.bundle.min.js 已经内置了 Popper（用于 Tooltip/Dropdown 的定位），完全不需要再引入 jQuery。记得从 angular.json 的 scripts 数组里删掉它：

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

• ID 唯一性校验：你的 HTML 里出现了两个 id="navbarNavAltMarkup" 的

  元素（一个在左侧导航，一个在右侧认证按钮）。这在 HTML 规范里是不允许的，而且会导致 data-bs-target 的行为完全不可预测。建议给左右两部分分配不同的 ID，比如：

  同时别忘了同步更新 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 初始化代码。