Bootstrap导航栏汉堡菜单点击不显示菜单列表问题求助

核心问题 #

你的汉堡按钮的data-bs-target属性指定的目标id是#navbarSupportedContent，但实际承载菜单的折叠容器id是sideheader，id不匹配导致点击按钮无法触发菜单展开/收起。

修复方法 #

将折叠容器的id改为navbarSupportedContent，和按钮的data-bs-target保持一致，或者修改按钮的data-bs-target为#sideheader。推荐前者，符合Bootstrap默认命名规范：

<nav class="navbar navbar-expand-lg" id="navbar">
  <div class="container-fluid" id="header">
    <div class="d-flex align-items-center ml-4">
      <a href="#">
        <img src="../assets/img/dreamers logo.png" width="80px;" class="mr-2">
      </a>
      <a class="navbar-brand" href="#">Project Booking App</a>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <!-- 修改此处的id为navbarSupportedContent -->
  <div class="collapse navbar-collapse" id="navbarSupportedContent" style="padding-right: 40px;">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0 ml-4">
      <li class="nav-item ms-2">
        <a class="nav-link" id="home1" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item ms-2">
        <a class="nav-link" id="home1" href="#feature">Features</a>
      </li>
      <li class="nav-item ms-2">
        <a class="nav-link" id="about1" href="#about">About</a>
      </li>
    </ul>
    <button class="btn btn-custom-btn ms-2" @click="openLoginModal" style="color: black;">Login</button>
    <button class="btn btn-custom-btn ms-4" @click="openRegisterModal" style="color: black;">Register</button>
  </div>
</nav>

额外检查点 #

• 确认已引入Bootstrap 5的JavaScript文件（折叠功能依赖该JS，建议放在</body>标签前）：

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

• 检查是否有其他自定义JavaScript代码阻止了按钮的点击事件
• 确保页面中没有重复的id值（避免DOM选择冲突）

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