Bootstrap 5.3 中 navbar 折叠失效，通常因重复引入 JS 文件（如同时加载 bootstrap.bundle.min.js 和 bootstrap.min.js + popper.min.js）导致冲突，需确保仅使用其中一种加载方式。
bootstrap 5.3 中 navbar 折叠失效，通常因重复引入 js 文件（如同时加载 `bootstrap.bundle.min.js` 和 `bootstrap.min.js` + `popper.min.js`）导致冲突，需确保仅使用其中一种加载方式。
在 Bootstrap 5.3 中，navbar 的响应式折叠功能（即移动端汉堡菜单点击展开/收起）依赖于 JavaScript 的 Collapse 插件，而该插件又强依赖 Popper（用于定位类组件）和 Bootstrap 自身的初始化逻辑。你提供的代码中存在一个关键性错误：重复且冲突地加载了三份 Bootstrap 相关脚本：
<!-- ❌ 错误：三者共存 → 冲突！ --> <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，再额外加载popper.min.js和bootstrap.min.js会引发全局对象（如Bootstrap.Collapse）被多次定义或覆盖； - 浏览器控制台可能无明显报错，但事件监听器未正确绑定，导致
data-bs-toggle="collapse"完全失活； - 点击汉堡图标后 DOM 无任何变化（
aria-expanded不切换、show类不添加、#navbarNav不显示）。
✅ 正确做法：二选一，不可共存
✅ 方案一（推荐）：仅使用 bootstrap.bundle.min.js
它已打包 Popper + Bootstrap 核心 JS，开箱即用，简洁可靠：
<!-- ✅ 正确：移除其他 JS，只保留这一行 --> <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
⚠️ 注意：
bootstrap.bundle.min.js必须在<nav></nav>结构之后加载（你已用defer，符合要求），且不能再引入bootstrap.min.js或单独的popper.min.js。
✅ 方案二（进阶）：分离加载 bootstrap.min.js + popper.min.js
仅当你有特殊需求（如需定制 Popper 版本、或项目构建流程强制分离依赖）时选用：
<!-- ✅ 正确：严格按顺序加载，且不引入 bundle --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
? 关键顺序：Popper 必须在 Bootstrap JS 之前加载，否则 Collapse 初始化失败。
✅ 补充检查项（常被忽略）
-
HTML 结构完整性：你的
<nav></nav>代码位于内 —— 这是严重错误！Navbar 必须放在中，否则 JS 无法找到目标元素#navbarNav。 -
data-bs-target指向正确：确认id="navbarNav"与data-bs-target="#navbarNav"完全一致（含#）。 -
无 CSS 干扰：检查是否自定义 CSS 错误设置了
display: none !important或visibility: hidden覆盖了.show类。
✅ 修复后的最小可运行示例
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap Navbar Fix</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><!-- ✅ Navbar 必须在 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</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav><!-- ✅ 只加载 bundle，且置于 body 底部或使用 defer --><script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
? 总结：Bootstrap 5.3 的折叠菜单失效，90% 源于 JS 加载冲突或 HTML 结构错位。优先选择 bootstrap.bundle.min.js 单文件方案，确保其唯一性、位置正确（body 内 + script 在 navbar 后），即可彻底解决汉堡菜单无响应问题。
