Bootstrap v5 导航栏dropdown下拉菜单无法正常打开问题求助

核心问题梳理 #

• 资源引入错误：你使用的是Bootstrap v5版本的CSS，但引入的本地Bootstrap JS版本不匹配，且缺少下拉功能必须的Popper.js依赖，同时JS加载顺序早于CSS，会导致组件初始化异常。
• 自定义脚本冲突：你额外编写的jQuery交互逻辑是Bootstrap 3/4版本的兼容写法，Bootstrap 5原生已自带下拉交互能力，且激活类名并非open，这段脚本会干扰原生功能运行。
• HTML结构不规范：导航栏的nav-item元素必须包裹在ul.navbar-nav容器内，当前直接放在container-fluid下的结构不符合Bootstrap导航栏的语法要求。

修复后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>rest api</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 先加载Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <style>
  body {
    box-sizing: border-box;
    display: grid;
    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
      'Arial', sans-serif;
    hyphens: auto;
    text-align: center;
  }
  </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
          <!-- 补全navbar-nav容器 -->
          <ul class="navbar-nav">
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
          </ul>
        </div>
      </nav>
<!-- 引入Bootstrap5 bundle JS（已内置Popper，无需额外引入jQuery） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- 移除冲突的自定义jQuery脚本 -->
</body>
</html>

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