Bootstrap 5.1折叠导航栏aria-expanded变为true后二次点击无法切换为false

常见故障原因及修复方案 #

• 依赖引入错误或顺序不对
  Bootstrap 5的折叠功能依赖Popper.js和自身的JS文件，且必须严格按照 Bootstrap CSS → Popper.js → Bootstrap JS 的顺序引入，仅引入CSS或者JS顺序错误都会导致折叠状态同步异常，出现仅能展开无法收回的问题。
  确认你的页面资源引入符合以下格式：

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css本地路径">
<!-- 引入Popper.js -->
<script src="popper.min.js本地路径"></script>
<!-- 引入Bootstrap JS -->
<script src="bootstrap.min.js本地路径"></script>

• DOM ID重复冲突
  检查页面全局是否存在多个id="navbarNav"的元素，ID为全局唯一标识，重复会导致data-bs-target定位元素错误，状态无法同步到对应按钮，确保该ID仅在折叠菜单的容器上出现一次。
• 折叠组件重复初始化冲突
  如果你既使用了官方的data-bs-*属性自动初始化折叠功能，又手动通过JS代码new bootstrap.Collapse(document.getElementById('navbarNav'))重复初始化了同一个组件，会导致两个实例的状态冲突，无法正常切换，保留任意一种初始化方式即可。
• Bootstrap 5.1.x版本已知bug
  Bootstrap 5.1早期小版本存在折叠组件aria-expanded状态同步的已知问题，将Bootstrap版本升级到5.1.3及以上的稳定版即可修复该问题。

快速验证方法 #

暂时注释掉页面内所有你自己编写的JS代码，仅保留官方示例的导航栏结构和正确引入的Bootstrap全套资源，测试切换功能是否正常，可快速定位是否为自定义代码冲突导致的问题。

内容的提问来源于stack exchange，提问作者Morzin