Bootstrap导航栏切换按钮无法正常工作的问题排查

这种情况我碰到过好多次，大概率是JS引入不完整、HTML结构不匹配或者版本混用导致的，按下面几个步骤排查就能解决：

• 先确认Bootstrap的JavaScript文件是否正确引入
  Bootstrap的折叠组件（也就是移动端菜单的展开收起功能）完全依赖它的JS文件，如果你只引入了CSS样式，点击按钮自然不会有任何反应。

  • 如果你用的是Bootstrap 5，不需要额外引入jQuery，直接引入包含Popper的Bootstrap JS bundle即可：

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    

  • 要是用的是Bootstrap 4，必须按「jQuery → Popper → Bootstrap JS」的顺序引入：

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
    

• 检查HTML结构的属性是否匹配正确
  切换按钮和折叠菜单的关联是通过属性绑定的，必须完全匹配：

  • Bootstrap 5的按钮需要data-bs-toggle="collapse"和data-bs-target="#你的菜单ID"，对应的菜单容器要有class="collapse navbar-collapse"和完全一致的ID：

    <!-- 移动端切换按钮 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 折叠菜单容器 -->
    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">首页</a></li>
        <!-- 其他菜单项 -->
      </ul>
    </div>
    

  • Bootstrap 4的话，属性名是data-toggle="collapse"和data-target="#你的菜单ID"，结构逻辑一样。
    这里一定要注意：data-bs-target（或data-target）里的ID值要和菜单容器的id完全一致，大小写、拼写都不能错，哪怕多一个空格都会失效。

• 排查是否存在JavaScript冲突
  如果页面里还引入了其他JS库或自定义脚本，可能会和Bootstrap的JS冲突。比如旧版本的jQuery和Bootstrap 5不兼容，或者其他插件修改了DOM元素导致折叠功能失效。你可以先把其他JS代码暂时注释掉，测试菜单是否恢复正常，再逐步排查冲突的代码段。

• 确认Bootstrap版本和代码不混用
  千万别把Bootstrap 4和5的代码混着用！比如你引入了Bootstrap 5的CSS，却写了Bootstrap 4的data-toggle属性（而不是5的data-bs-toggle），这种版本不匹配的情况会直接导致功能失效。打开你引入的CSS链接，确认版本号，然后对应使用该版本的正确属性和JS文件。

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