Bootstrap 5.3移动端Navbar toggler点击后无法关闭问题求助

• 检查HTML结构规范性
  确保导航栏切换按钮与折叠容器的绑定属性完全匹配：

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <!-- 导航链接、下拉菜单容器 -->
  </div>
  

  重点核对：data-bs-target的值必须和折叠容器的id完全一致，aria-expanded初始值需设为false，避免状态识别混乱。

• 修正JS文件引入方式
  Bootstrap 5的bootstrap.bundle.min.js已内置Popper，绝对不能同时引入多个Bootstrap JS文件（比如同时引入bundle、popper、bootstrap.min.js），这会引发JS冲突，直接破坏组件功能。正确引入二选一：

  1. 仅引入bootstrap.bundle.min.js（推荐，无需额外Popper）
  2. 先引入popper.min.js，再引入bootstrap.min.js
     同时检查页面是否引入了jQuery（Bootstrap 5不再依赖jQuery）或其他版本的Bootstrap文件，这些都可能导致冲突。

• 排查自定义代码干扰

  • 检查自定义JS是否手动修改了.collapse组件的aria-expanded属性、添加了额外的点击事件，覆盖了Bootstrap的默认交互逻辑。
  • 检查自定义CSS是否对.collapse、.navbar-toggler、.dropdown相关类设置了display: none !important等强制样式，导致组件状态无法被Bootstrap正确识别。

• 验证下拉菜单结构
  下拉菜单必须遵循Bootstrap的标准结构：

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      下拉菜单
    </a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">选项1</a></li>
      <li><a class="dropdown-item" href="#">选项2</a></li>
    </ul>
  </li>
  

  确保dropdown-toggle标签带有data-bs-toggle="dropdown"属性，父元素包含dropdown类。

• 清除浏览器缓存测试
  浏览器缓存的旧JS文件可能导致新代码不生效，尝试强制刷新页面（Ctrl+F5）或清除缓存后重新测试。

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