在 bootstrap 5 响应式导航栏中，移动端点击菜单项跳转锚点后，下拉菜单常保持展开状态；本文介绍如何通过 data-bs-toggle 和 data-bs-target 属性组合，实现「点击即跳转 + 自动收起」的流畅体验。
在 bootstrap 5 响应式导航栏中，移动端点击菜单项跳转锚点后，下拉菜单常保持展开状态；本文介绍如何通过 data-bs-toggle 和 data-bs-target 属性组合，实现「点击即跳转 + 自动收起」的流畅体验。
在 Bootstrap 5 中，.navbar-collapse 的显隐由 Collapse 插件控制，其默认行为是：仅响应 .navbar-toggler 的点击，不监听内部链接的点击事件。因此，当用户在小屏设备上点击「Über uns」等锚点链接时，页面虽成功滚动到对应区域（如 #about），但导航栏仍保持展开，遮挡内容——这对移动端用户体验极为不利。
解决思路很明确：为每个可交互的导航链接（尤其是内部锚点链接）显式触发 Collapse 的收起逻辑，同时确保跳转功能不受影响。Bootstrap 5 提供了简洁的声明式方案：只需为 标签添加两个 data 属性：
- data-bs-toggle="collapse"：声明该元素具备触发 Collapse 行为的能力；
- data-bs-target=".navbar-collapse.show"：精准定位当前处于展开状态（即含 .show 类）的 .navbar-collapse 元素，避免误操作其他折叠组件。
✅ 正确用法示例（仅需修改 标签）：
<ul class="navbar-nav ms-auto mb-3 mb-lg-0 fs-5">
<li class="nav-item mx-lg-2">
<a class="nav-link text-white" href="#"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">
Home <i class="fa-solid fa-house"></i>
</a>
</li>
<li class="nav-item mx-lg-2">
<a class="nav-link text-white" href="#about"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">
Über uns <i class="fa-solid fa-address-card"></i>
</a>
</li>
<li class="nav-item mx-lg-2">
<a class="nav-link text-white" href="#kontakt"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">
Kontakt <i class="fa-solid fa-phone"></i>
</a>
</li>
<li class="nav-item mx-lg-2">
<a class="nav-link text-white" href="#faq"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">
FAQ <i class="fa-solid fa-question"></i>
</a>
</li>
<!-- 注意：外部链接（如社交媒体）无需添加，因其不触发页面内跳转 -->
<li class="d-flex align-items-center mx-lg-2 mt-2 mt-lg-0">
<a href="https://facebook.com/xxx" target="_blank" class="icon-link text-white" title="Folge uns auf Facebook!">
<i class="fab fa-facebook fa-lg me-2 mx-lg-2"></i>
</a>
<a href="https://twitter.com/xxx" target="_blank" class="icon-link text-white" title="Folge uns auf Twitter!">
<i class="fab fa-twitter fa-lg mx-2"></i>
</a>
<a href="https://instagram.com/xxx" target="_blank" class="icon-link text-white" title="Folge uns auf Instagram!">
<i class="fab fa-instagram fa-lg mx-2"></i>
</a>
</li>
</ul>⚠️ 关键注意事项：
- 仅对内部跳转链接添加属性：href 值为 #id 或 /page.html 等同域内路径的 才需添加；target="_blank" 的外部链接（如社交媒体）不应添加，否则会触发无意义的 Collapse 操作，且可能干扰新窗口打开。
- 选择器必须精确：使用 .navbar-collapse.show 而非 #navbarSupportedContent，是因为 Collapse 插件在展开时动态添加 .show 类，而 #navbarSupportedContent 是静态 ID；前者能确保只作用于当前已展开的导航栏，兼容多 Collapse 实例场景。
- 不破坏原生行为：该方案完全基于 Bootstrap 5 内置机制，无需额外 JavaScript，不影响平滑滚动、hash 变更或浏览器历史记录。
- 图标与文字共存兼容： 标签作为 的子元素，不影响事件绑定，所有样式和交互保持原样。
? 进阶提示：若项目中使用了自定义滚动动画（如 scrollIntoView({ behavior: 'smooth' })），建议保留原生 href 锚点，本方案与其完全正交，可叠加使用。
总结来说，这一方案以最小侵入性、零 JS 依赖，精准解决了 Bootstrap 5 移动端导航栏「跳转后不收起」的核心痛点，显著提升单页应用（OnePager）的移动端可用性。只需为关键导航项补充两行 HTML 属性，即可交付专业级交互体验。
