汉堡包导航栏可见，但不会切换

Question

我目前正在尝试让导航栏随着屏幕变小而折叠，这是成功的，但是在它折叠成汉堡包后，汉堡包仍然不可点击（不会切换）。

<!DOCTYPE html>
<html>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="CSS/style.css" />
    
    
    
      </head>
    
      <body>
      <div>
        <div class="bg-img">
            <div class="header">
              <img src="images/Diamond-Only-White.png" class="img-fluid" class="rounded float-start">
                <h1>NAME</h1></div>
                  <nav class="navbar navbar-expand-lg navbar-dark">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span></button>
                        <div class="topnav collapse navbar-collapse" id="navbarNav">

                          <ul class="navbar-nav container">
                            <!--navigation list-->
                            <li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
                            <li class="nav-item"><a class="nav-link" href="Engagement_rings.html">Engagement Rings</a></li>
                            <li class="nav-item"><a class="nav-link" href="Loose_Diamonds.html">Loose Diamonds</a></li>
                            <!--subnavigation menu -->
                              <div class="subnav">
                            <!--drop down funtion-->
                                <li class="nav-item"><button class="subnavbtn nav-link">More<i class="fa fa-caret-down" style="font-size:10px"></i></button></li>
                            <!--subnavigation item list-->

                                <div class="subnav-content">
                                  <li class="nav-item"><a class="nav-link" href="Finance.html">Finance</a></li>
                                  <li class="nav-item"><a class="nav-link" href="The_Diamond_Blog.html">The Diamond Blog</a></li>
                                  <li class="nav-item"><a class="nav-link" href="Invest_in_Diamonds.html" >Invest in Diamonds</a></li>
                                </div>
                             </div>
                            <!--last navigation item-->
                              <li class="nav-item"><a class="nav-link" href="Contact_Us.html">Contact Us</a></li>
                         </ul>
    
                      </div>
                  </nav>
    
          <!--<img class="bg-img" class="box-animation" src="images/Option1.webp" />-->
         </div>
     </div>
    
    
    
          <main>
    
                <br>
                <br>
                <br>

          </main>
    
    
            <footer>
    
            </footer>
    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
          </body>
    
      </html>

Answer 1

您需要使用 data-bs-target，而不是 data-target。对于 Bootstrap 所有 JavaScript 插件的 5 Beta 2 数据属性现在都已命名空间，以帮助将 Bootstrap 功能与第三方区分开来。

在此处查看示例代码：https://getbootstrap.com/docs/5.0/components/navbar/#supported-content

汉堡包导航栏可见，但不会切换

Hamburger navbar is visible, but it won't toggle

toggle

twitter-bootstrap

hamburger-menu

bootstrap-5