Bootstrap 的切换器有问题。它显示但不隐藏

Question

我正在使用 Bootstrap 做一个网站 5. 当导航栏处于响应视口并单击切换器图标时，它可以显示导航。但是，如果我再次单击，则不会隐藏。查看开发人员工具内部，我看到类名保留在显示类名中。任何人都可以帮助我。

我的 html 导航栏：

<nav class="navbar navbar-toggler navbar-light">
  
  <div class="container-fluid">

    <a class="navbar-brand text-light" href="#">
      <img src="../TinDog Start Here/images/vecteezy_spectacle-dog-wearing-with-glasses-vector-illustration_2304572/spectacled_dog_vector_illustration1_generated.jpg" alt="Perro Vectores por Vecteezy" width="80" height="74">
    TinDog</a>
  
    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerContent" aria-controls="navbarTogglerContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbarTogglerContent">
  
      <ul class="navbar-nav ms-auto">
        <li class="nav-item active">
          <a href="#" class="nav-link text-light" aria-current="page">Contact</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light" aria-current="page">Pricing</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light" aria-current="page">Download</a>
        </li>
    
      </ul>
  
    </div>
    
  </div>


</nav>

Bootstrap 脚本：

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

点击前toggler的状态：

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

点击后状态：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerContent" aria-controls="navbarTogglerContent" aria-expanded="true" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
<div class="navbar-collapse collapse show" id="navbarTogglerContent">

按我说的再次点击后不要隐藏导航

Answer 1

在这里，您的代码没有错。＆它工作正常。 但是，您添加了捆绑脚本和单独的 bootstrap 脚本。您需要从两者中添加任何一个。

捆绑包：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

否则：

分开：

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

请阅读bootstrap docs here了解更多详情。

Bootstrap 的切换器有问题。它显示但不隐藏

Problems with the toggler of Bootstrap. It shows but doesn't hidden

navbar

bootstrap-5

script