Bootstrap导航栏toggler按钮失效问题求助

以下是导致汉堡菜单失效的核心问题及对应修复方法：

• 版本不匹配
  你当前引入的Bootstrap CSS是5.2.3版本，但JS是5.0.2版本，版本不一致会引发功能异常。建议统一使用同一版本的资源：

  <!-- 统一使用5.2.3版本的CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 对应版本的JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  

• 数据属性错误
  Bootstrap 5已将旧版的data-toggle、data-target替换为带bs前缀的属性，同时你写错了目标ID的拼写：

  • 将data-toggle="collapse"改为data-bs-toggle="collapse"
  • 将data-target="NssavbarSupportedContent"改为data-bs-target="#navbarSupportedContent"（注意添加#，并修正ID拼写）

• JS加载时机问题
  若将JS放在<head>中，需添加defer属性确保DOM加载完成后再执行JS；更稳妥的方式是将JS移至<body>标签末尾，避免因DOM未加载完成导致元素无法被识别。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <!-- Latest compiled and minified CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <section id="title">
    <!-- Nav Bar -->
    <nav class="navbar bg-dark navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="">Tindog</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Download</a>
          </li>
        </ul>
      </div>
    </nav>
   </section>
   <!-- 将JS移至body末尾 -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
 </body>
</html>

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