Bootstrap折叠导航栏点击按钮无响应问题求助

嗨，我帮你定位到问题啦！你的折叠导航栏无法展开的核心原因是折叠按钮的目标ID和实际折叠容器的ID不匹配——这是Bootstrap折叠组件最容易踩的小坑之一。

问题细节分析 #

看你的代码就能发现：

• 折叠按钮的data-target属性值是#navbarTogglerDemo02
• 但对应的折叠容器<div>的ID却是collapsibleNavbar

Bootstrap的折叠组件是通过data-target来指定要控制的容器的，两者的ID必须完全一致，才能触发展开/折叠的交互动作。

修改后的正确代码 #

你只需要把折叠容器的ID改成和按钮data-target一致的值就行（反过来调整按钮的data-target也可以），这里我调整容器ID来匹配按钮：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <img src="images/logo.jpg" alt="Logo" height="45" width="45">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 这里把ID改为navbarTogglerDemo02，和按钮的data-target对应 -->
  <div class="navbar-collapse collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#dogs">Dogs</a>
      </li>
      <li class="nav-item"><a class="nav-link" href="#cats">Cats</a>
      </li>
    </ul>
  </div>
</nav>

额外确认 #

你引入的Bootstrap 4.5.2的CDN链接是完全正确的，而且jQuery、Popper.js和Bootstrap JS的加载顺序也没问题（必须先加载jQuery，再Popper，最后Bootstrap JS），这部分不需要调整。

修改后再测试，点击折叠按钮应该就能正常展开导航栏了！

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