Bootstrap5导航栏点击收起教程

本文深入讲解了如何在 Bootstrap 5 中优雅解决移动端导航栏点击链接后不自动收起的痛点问题——通过巧妙运用原生 `data-bs-toggle="collapse"` 与精准的 `data-bs-target=".navbar-collapse.show"` 组合，无需额外 JavaScript 即可实现“点击跳转+即时收起”的双重效果，既避免遮挡内容、提升单页网站交互流畅度，又完美兼容锚点定位和平滑滚动，让响应式导航真正做到智能、可靠、开箱即用。

本文详解如何在 Bootstrap 5 中实现移动端导航栏点击链接后自动收起，避免遮挡内容，提升响应式体验，同时确保页面内跳转（如锚点定位）功能正常工作。

本文详解如何在 Bootstrap 5 中实现移动端导航栏点击链接后自动收起，避免遮挡内容，提升响应式体验，同时确保页面内跳转（如锚点定位）功能正常工作。

在 Bootstrap 5 的响应式导航栏中，当屏幕缩小时（如手机端），导航菜单会折叠为汉堡按钮（.navbar-toggler），点击后展开 .navbar-collapse。但默认行为是：用户点击导航链接跳转后，菜单仍保持展开状态——这不仅浪费屏幕空间，更严重影响移动端用户体验（尤其是一屏一页面的单页网站）。解决该问题的关键在于：在触发跳转的同时，主动关闭已展开的折叠菜单。

Bootstrap 5 提供了原生、无 JS 依赖的解决方案：利用其内置的 data-bs-toggle="collapse" 和 data-bs-target 属性组合，精准控制折叠组件的显隐状态。

✅ 正确做法：为每个可跳转的 标签添加收起指令

只需将 data-bs-toggle="collapse" 和 data-bs-target=".navbar-collapse.show" 添加到所有需要触发跳转并关闭菜单的导航链接上（即 标签），即可实现「点击即跳转 + 自动收起」的双重效果。

? 注意：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/x" 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/x" 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/x" 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>

⚠️ 重要注意事项

• 勿滥用 data-bs-target="#navbarSupportedContent"：若目标 ID 未加 .show 修饰，可能在菜单未展开时也触发 collapse 行为，导致意外闪烁或失效。
• 外部链接（target="_blank"）无需添加收起属性：如社交图标，它们不触发页面内跳转，也不影响当前视口，添加反而无意义。
• 确保 Bootstrap 5 JS 已正确加载：该方案依赖 bootstrap.bundle.min.js（含 Popper），请确认