Bootstrap 5.3 中 navbar 汉堡菜单失效，通常源于 JavaScript 文件重复加载导致的冲突——特别是同时引入 bootstrap.bundle.min.js、bootstrap.min.js 和 popper.min.js 三者，破坏了 Collapse 组件的正常初始化。
bootstrap 5.3 中 navbar 汉堡菜单失效，通常源于 javascript 文件重复加载导致的冲突——特别是同时引入 `bootstrap.bundle.min.js`、`bootstrap.min.js` 和 `popper.min.js` 三者，破坏了 collapse 组件的正常初始化。
在 Bootstrap 5.3+ 中，navbar 的响应式折叠功能（即点击汉堡图标展开/收起导航项）依赖于 Collapse JavaScript 插件，该插件需要正确初始化且无运行时冲突。你提供的代码中存在一个关键问题：重复引入了互斥的 Bootstrap JS 资源：
<!-- ❌ 错误：三者共存 → 冲突！ --> <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
bootstrap.bundle.min.js 已完整内置 Popper.js 和所有 Bootstrap JS 插件（包括 Collapse、Dropdown、Modal 等）。而 bootstrap.min.js 是“精简版”，不包含 Popper，必须配合外部 Popper 才能工作。当三者同时加载时：
-
bootstrap.bundle.min.js首先注册全局bootstrap对象并初始化 Collapse； - 后续
bootstrap.min.js会覆盖或干扰已注册的模块； - Popper 的重复加载更可能引发
TypeError: Popper is not a constructor等静默错误； - 最终导致
data-bs-toggle="collapse"失效，点击无响应。
✅ 正确做法：二选一，且仅选其一
✅ 方案一（推荐）：仅使用 bootstrap.bundle.min.js
简洁、可靠、零配置，适合绝大多数项目：
<!-- ✅ 正确：移除 popper.min.js 和 bootstrap.min.js --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
? 注意：
defer属性可保留，确保脚本在 DOM 解析后执行，不影响 Collapse 初始化。
✅ 方案二（按需定制）：bootstrap.min.js + popper.min.js
仅当你需独立升级 Popper、或明确排除某些插件以减小体积时选用（极少见）：
<!-- ✅ 正确：严格顺序 + 无 bundle --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
⚠️ 关键要求：
popper.min.js必须在bootstrap.min.js之前加载，否则 Collapse 将因缺少依赖而静默失败。
? 额外检查项（确保万无一失）
-
HTML 结构完整性：确认
<nav></nav>在内，且id="navbarNav"与data-bs-target="#navbarNav"完全匹配（含#）； -
无 JS 控制台报错：打开浏览器开发者工具（F12 → Console），刷新页面，排查
Uncaught TypeError或Popper is not defined； -
CSS 未被覆盖：检查是否自定义 CSS 错误设置了
.navbar-collapse { display: block !important; }等强制样式； -
Bootstrap 版本一致性：CDN 中 CSS 与 JS 的
@5.3.3版本号必须完全一致（你的代码中 JS 是5.3.3，但 CSS URL 未显示版本号，请补全为@5.3.3）。
✅ 修复后完整最小可运行示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbar Fix</title>
<!-- Bootstrap CSS (v5.3.3) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a href="#" class="navbar-brand">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Courses</a></li>
</ul>
</div>
</div>
</nav>
<!-- Bootstrap JS (bundle only) -->
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>✅ 总结：删掉多余的 JS 引入，只保留
bootstrap.bundle.min.js，即可 99% 解决汉堡菜单不折叠问题。 这是 Bootstrap 5.3 官方推荐的标准实践，兼顾稳定性、兼容性与开发效率。
