Bootstrap 5.2.2升级至5.2.3后导航栏下拉菜单失效求助

你的下拉菜单失效的核心原因是Bootstrap JavaScript文件的引用存在两个关键问题：

• 未指定具体版本号：当前JS引用为https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js，CDN会默认拉取最新版Bootstrap，和你指定的v5.2.3 CSS版本存在兼容性差异
• Integrity哈希值不匹配：你使用的JS哈希对应旧版本，浏览器会因资源完整性验证失败，拒绝执行该JS文件，而Bootstrap下拉菜单的展开逻辑完全依赖JS触发

修复步骤 #

将Bootstrap JS引用替换为v5.2.3版本的官方CDN链接（包含正确的integrity哈希）：

<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>

修复后的完整代码示例 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="page">
  <header>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">AT Products LLC</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="/">AT Products</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Products</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
                <li><a class="dropdown-item" href="/flash">Flash Documentation</a></li>
                <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
                <li><a class="dropdown-item" href="/mdickie">MDickie Projects</a></li>
                <li><a class="dropdown-item" href="/bxpp">BxPP</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
</div>

<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>

验证方法 #

替换后打开浏览器开发者工具（F12）：

• 切换到「控制台」，检查是否有资源加载错误或JS执行报错
• 切换到「网络」标签，确认bootstrap.bundle.min.js的版本为5.2.3，且加载状态为200

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