我目前正在尝试让导航栏随着屏幕变小而崩溃，这是成功的，但是在它崩溃成汉堡包后，汉堡包仍然不可点击(不会切换)。
<!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>
您需要使用data-bs-target，而不是data-target。对于Bootstrap 5 Beta 2，所有JavaScript插件的数据属性现在都有命名空间，以帮助区分Bootstrap功能和第三方。
查看示例代码:https://getbootstrap.com/docs/5.0/components/navbar/#supported-content