jQuery导致Bootstrap导航栏下拉菜单无法正常收起的问题求助

导航栏切换按钮点击展开功能正常，但再次点击无法收起，排查后确认是引入jQuery导致的问题。

Bootstrap 5 完全移除了对 jQuery 的依赖，采用原生 JavaScript 实现组件功能。当页面同时引入 jQuery 和 Bootstrap 5 的 JS 文件时，jQuery 的事件处理机制会干扰 Bootstrap 折叠组件的状态切换逻辑，导致折叠状态无法正确更新，出现只能展开不能收起的情况。

方案1：移除 jQuery（推荐） #

如果项目中没有必须使用 jQuery 的场景，直接删除 jQuery 的引入代码即可：

<!-- 移除这行代码 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

保留 Bootstrap 5 的 bootstrap.bundle.min.js（已包含 Popper.js，无需额外引入），导航栏折叠功能即可恢复正常。

方案2：保留 jQuery 时的兼容处理（仅当必须用 jQuery 时） #

若项目依赖 jQuery，需确保 Bootstrap 5 的 JS 在 jQuery 之后加载，且避免用 jQuery 手动绑定导航栏的点击事件。不过这种方式仍可能存在潜在冲突，因此优先推荐方案1。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
  <div class="container">
    <div class="row mt-1">
      <a href="/" class="navbar-brand col-4"><img src="https://via.placeholder.com/50" alt="Bastion Logo"></a>

      <div class="d-flex col-6 align-items-center">
        <h6 class="menuItem text-dark hover-underline-animation-navitem pb-1"><a href="mailto:support@bastiontech.co.uk" class="menuItem text-dark text-decoration-none">support@bastiontech.co.uk</a></h6>
      </div>
    </div>

    <button type="button" class="navbar-toggler text-bg-dark" data-bs-target="#navbarNav" data-bs-toggle="collapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle Navbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <div class="mx-auto"></div>

      <div>
        <ul class="navbar-nav">
          <li class="nav-item hover-underline-animation-navitem">
            <a href="#" class="nav-link menuItem text-dark">Website Design</a>
          </li>
          <li class="nav-item hover-underline-animation-navitem">
            <a href="#" class="nav-link menuItem text-dark">SEO</a>
          </li>
          <li class="nav-item hover-underline-animation-navitem">
            <a href="#" class="nav-link menuItem text-dark">Power Apps</a>
          </li>
          <li class="nav-item hover-underline-animation-navitem">
            <a href="#" class="nav-link menuItem text-dark">Contact Us</a>
          </li>
          <li class="nav-item btn Audit btn-md text-white">
            Free Audit
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

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