Bootstrap导航切换器在Codeply正常但浏览器中无法生效

你的代码存在两个问题导致汉堡按钮点击无响应：

• ID属性不匹配：汉堡按钮的data-bs-target属性设置为#navbarTogglerDemo02，但实际导航折叠容器的id是navbarTogglerDemo01，两者不一致导致触发事件无法关联到对应容器。
• 缺少交互所需的JS依赖：Bootstrap 5的折叠、下拉等动态交互效果都依赖Popper.js和Bootstrap自身的JS脚本，你仅引入了CSS样式文件，没有引入对应的JS文件，交互逻辑无法执行。

修正后的完整代码如下：

<html>
 <head>
  <title>Practice</title>  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
   rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 </head>
 <body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <div class="container-fluid">
    <a class="navbar-brand" href="">WonderWeb</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
     <ul class="navbar-nav ms-auto">
      <li class="nav-item"><a href="" class="nav-link">Contact</a></li>
      <li class="nav-item"><a href="" class="nav-link">Products</a></li>
      <li class="nav-item"><a href="" class="nav-link">Payment</a></li>
     </ul>
    </div>
   </div>
  </nav>
  <!-- 新增Bootstrap5交互所需的JS依赖 -->
  <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>
 </body>
</html>

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