移动端下拉菜单点击后不收起，主要因data-bs-toggle属性写错、重复加载Bootstrap JS文件、动态DOM未正确初始化Dropdown实例或按钮type缺失导致。
移动端下拉菜单点击后不收起，大概率是 data-bs-toggle 属性写错了
Bootstrap 5 要求所有交互属性带 bs 前缀，比如 data-bs-toggle="dropdown"。如果误写成 Bootstrap 4 的 data-toggle="dropdown"，JS 根本不会绑定事件——菜单能展开纯属 CSS 侥幸生效，但点击关闭逻辑完全失效。
- 检查触发元素（如
<button>或<a>）是否用了data-bs-toggle="dropdown" - 确认
aria-expanded和aria-haspopup属性也用了标准写法，不是aria-expanded="true"写成aria-expanded="1" - 特别注意：动态插入的 DOM（比如通过
fetch()加载的header.html）里，这些属性必须在插入前就写对，JS 不会自动“修复”错写的属性
重复加载 bootstrap.bundle.min.js 和 bootstrap.min.js 会导致 Collapse 插件初始化两次
这是移动端菜单“只展开不收起”的最常见根因。两个 JS 文件共存时，Collapse 和 Dropdown 组件会被注册两次，事件监听器互相覆盖，aria-expanded 状态和实际 DOM 类名（如 show）彻底脱节。
- 打开浏览器开发者工具 → Network 面板，搜索
bootstrap，确认只加载了bootstrap.bundle.min.js一次 - 删掉所有形如
<script src="bootstrap.min.js"></script>和<script src="popper.min.js"></script>的标签 - 如果用了构建工具（Vite/Webpack），检查是否有插件自动注入了另一份 Bootstrap JS
用 data-bs-auto-close="outside" 失效？试试手动初始化 Dropdown 实例
声明式属性 data-bs-auto-close="outside" 依赖 JS 初始化时机。如果 DOM 是后期注入的，或页面有大量异步脚本，这个属性常被忽略。
- 在 DOM 插入完成后（比如
fetch().then(() => { ... })里），显式调用：
const dropdownElement = document.querySelector('.dropdown');
if (dropdownElement) {
new bootstrap.Dropdown(dropdownElement, { autoClose: 'outside' });
}
- 不要在
DOMContentLoaded里初始化，而要在动态内容插入完毕后再执行 - 避免对同一个元素重复 new，否则实例冲突，
hide()可能失效
按钮类型错误会触发表单提交，间接导致菜单无法关闭
如果下拉触发器是 <button> 且没设 type="button"，在表单内点击会默认提交，页面刷新或跳转，菜单自然“来不及关”。
立即学习“前端免费学习笔记（深入）”；
- 所有触发下拉的
<button>必须显式写type="button" - 如果用
<a>，确保href是#或 JavaScript 阻止默认行为，否则页面滚动也会打断状态 - 检查控制台有没有
Uncaught TypeError: Cannot read properties of null类错误——常是菜单 DOM 被意外移除后，Bootstrap 还试图操作它
真正卡住的问题往往不在 HTML 结构本身，而在 JS 加载顺序、属性拼写细节和动态 DOM 的生命周期管理。多看一眼 Network 面板和 console 报错，比反复改 CSS 更快定位。
