bootstrap手机端导航点击不自动收起是默认行为，需手动添加data-bs-toggle="collapse"到每个.nav-link或用js调用hide()，并确保bootstrap.bundle.min.js正确加载且css无强制显示干扰。
Bootstrap 手机端点击导航链接后不自动收起，不是 bug，是默认行为——它压根没设计「点击即收起」逻辑。必须手动加触发机制，否则用户得再点一次汉堡图标，体验断裂。
给 .nav-link 加 data-bs-toggle="collapse" 最省事
这是声明式写法，不写 JS，靠 Bootstrap 自己处理状态同步和动画，兼容性最好。
-
data-bs-toggle="collapse"必须加在每个.nav-link元素上，不能只加在.navbar-toggler上 -
data-bs-target要精准指向当前已展开的折叠区：推荐用.navbar-collapse.show（类选择器），而不是#navbarNav（ID 选择器）——避免误关其他 collapse 组件 - 如果用了自定义 ID（比如
id="mainNav"），那data-bs-target就得写成#mainNav，且该元素必须同时有collapse和show类 - 锚点链接（
href="#about"）也生效，但前提是没被 JS 拦截（比如平滑滚动库调了preventDefault()）
用 JS 监听点击并调 hide() 更可控
适合需要判断条件、或页面里有多个折叠区、或用了自定义初始化逻辑的场景。
- 必须等 DOM 加载完、Bootstrap JS 初始化完成后再执行，否则
bootstrap.Collapse.getInstance()返回null - 获取实例时传入折叠容器元素，例如：
bootstrap.Collapse.getInstance(document.getElementById('navbarNav')) - 只在菜单实际展开时调
hide()：先检查element.classList.contains('show')，避免桌面端误触发 - 别直接操作
element.style.display = 'none'——这会破坏aria-expanded同步和后续 toggle 状态，导致菜单彻底点不开
别用 navbarToggler.click() 模拟点击
看起来简单，但容易翻车，尤其在多导航栏或响应式边界场景下。
- 桌面端
.navbar-collapse不带show类，click()会强制触发一次无意义切换，可能把原本展开的状态搞乱 -
document.querySelector('.navbar-toggler')在多个导航栏时可能选错目标（比如顶部 + 侧边各一个） - 执行时机稍早（比如刚进
DOMContentLoaded），Bootstrap 的 Collapse 插件可能还没绑定事件监听器，调用无效 - 它绕过了 data-bs-* 属性的声明式管理，
aria-expanded、过渡动画、hidden.bs.collapse事件钩子都可能不同步
真正要小心的是：所有方案都依赖 bootstrap.bundle.min.js（含 Popper）正确加载，且 CSS 中没用 display: block !important 这类规则强行覆盖 .navbar-collapse.collapse 的响应式隐藏逻辑——后者会让菜单在小屏下“未点先开”，连带导致收起失效。
