Bootstrap 可折叠菜单在单击时不会展开

Question

我试图在屏幕较小时单击导航栏折叠菜单来展开。我正在使用 Bootstrap 中的导航栏，我已根据需要对其进行了调整（将链接拆分到导航栏的每一端）。现在，当屏幕变小时链接会崩溃，但按下手风琴按钮时什么也不会发生。

这是我的

dependencies

来自 package.json:

"dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/platform-server": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@angular/ssr": "^17.0.7",
    "bootstrap": "^5.3.2",
    "express": "^4.18.2",
    "jquery": "^3.7.1",
    "popper.js": "^1.16.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
},

这是我来自 angular.json 的脚本和样式：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js", 
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],

最后这是我的 HTML：

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-primary navbar-fixed-top">
    <img src="../../assets/fb-helmet.png" alt="Logo" class="helmet-logo">
    
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Teams </a>
        

        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Seasons
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">2023</a>
            <a class="dropdown-item" href="#">2022</a>
            <a class="dropdown-item" href="#">2021</a>
          </div>
        </div>


      </div>
    </div>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup" >
        <div class="navbar-nav" id="Auth-buttons">
            <a class="nav-item nav-link" href="#">Sign In</a>
            <a class="nav-item nav-link" href="#">Sign Up</a>
            </div>
    </div>
  </nav>
</header>

到目前为止，我已经尝试将另一篇相关SO帖子here中的这些脚本添加到index.html文件中并运行，但没有任何变化。我尝试使用开发人员控制台进行调试，但没有看到 Bootstrap 脚本文件，并且在鼠标单击上设置断点也没有显示任何内容。如有任何帮助，我们将不胜感激。

Answer 1

Bootstrap 5 需要使用

data-bs-*

，而不是 Bootstrap 5 之前版本的

data-*

。

<button
  class="navbar-toggler"
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#navbarNavAltMarkup"
  aria-controls="navbarNavAltMarkup"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <span class="navbar-toggler-icon"></span>
</button>

...

<button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
>
    Seasons
</button>

导入 Bootstrap Bundle (bootstrap.bundle.min.js) 时，您可以从 angular.json 文件中的

scripts

数组中删除 jquery.json。

演示@StackBlitz