Bootstrap 5导航栏点击跳转后自动关闭的实现方案求助

问题说明 #

开发单页网站时，使用Bootstrap 5导航栏遇到以下问题：

• 点击导航链接可正常跳转到页面指定锚点位置
• 移动端导航栏展开后，点击链接不会自动关闭，需手动点击关闭按钮，遮挡半屏影响体验
• 尝试添加data-toggle="collapse" data-target=".navbar-collapse.show"后，导航栏能关闭，但锚点跳转功能失效

解决方案 #

通过原生JavaScript实现点击导航链接后先完成锚点跳转，再关闭折叠导航栏，同时保留原有功能：

步骤1：修改导航链接的HTML #

给所有需要触发关闭的导航链接（Home、Über uns、Kontakt、FAQ）添加自定义类nav-link-close，方便JS选择器定位：

<!-- 修改后的导航链接示例 -->
<li class="nav-item mx-lg-2">
  <a class="nav-link text-white nav-link-close" href="#">Home <i class="fa-solid fa-house"></i></a>
</li>
<li class="nav-item mx-lg-2">
  <a class="nav-link text-white nav-link-close" href="#about">Ü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 nav-link-close" href="#kontakt">Kontakt <i class="fa-solid fa-phone"></i></a>
</li>
<li class="nav-item mx-lg-2">
  <a class="nav-link text-white nav-link-close" href="#faq">FAQ <i class="fa-solid fa-question"></i></a>
</li>

步骤2：添加JavaScript代码 #

在页面底部（或外部JS文件中）添加以下代码，利用Bootstrap 5的Collapse API控制导航栏状态：

// 监听所有带nav-link-close类的链接点击事件
document.querySelectorAll('.nav-link-close').forEach(link => {
  link.addEventListener('click', function(e) {
    // 获取折叠导航栏DOM元素
    const navbarCollapse = document.getElementById('navbarSupportedContent');
    // 初始化Bootstrap Collapse实例，手动控制状态
    const collapseInstance = new bootstrap.Collapse(navbarCollapse, {
      toggle: false
    });
    
    // 仅当导航栏处于展开状态时关闭（避免桌面端误操作）
    if (navbarCollapse.classList.contains('show')) {
      collapseInstance.hide();
    }
  });
});

完整修改后的导航栏代码 #

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-lg-3 sticky-top">
  <div class="container">
    <a href="index.html"><img src="/images/solveco.png" width="300" height="100" alt="" /></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <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 nav-link-close" href="#">Home <i class="fa-solid fa-house"></i></a>
        </li>
        <li class="nav-item mx-lg-2">
          <a class="nav-link text-white nav-link-close" href="#about">Ü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 nav-link-close" href="#kontakt">Kontakt <i class="fa-solid fa-phone"></i></a>
        </li>
        <li class="nav-item mx-lg-2">
          <a class="nav-link text-white nav-link-close" href="#faq">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="x" target="_blank" class="icon-link text-white" data-toggle="tooltip" data-placement="bottom"
            title="Folge uns auf Facebook!">
            <i class="fab fa-facebook fa-lg me-2 mx-lg-2"></i></a>

          <a href="x" target="_blank" class="icon-link text-white" data-toggle="tooltip" data-placement="bottom"
            title="Folge uns auf Twitter!">
            <i class="fab fa-twitter fa-lg mx-2"></i></a>

          <a href="x" target="_blank" class="icon-link text-white" data-toggle="tooltip" data-placement="bottom"
            title="Folge uns auf Instagram!">
            <i class="fab fa-instagram fa-lg mx-2"></i></a>

        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 页面底部的JS代码 -->
<script>
document.querySelectorAll('.nav-link-close').forEach(link => {
  link.addEventListener('click', function(e) {
    const navbarCollapse = document.getElementById('navbarSupportedContent');
    const collapseInstance = new bootstrap.Collapse(navbarCollapse, {
      toggle: false
    });
    
    if (navbarCollapse.classList.contains('show')) {
      collapseInstance.hide();
    }
  });
});
</script>

原理说明 #

• 利用Bootstrap 5官方Collapse类API，手动控制导航栏折叠状态
• 仅在导航栏展开（移动端）时执行关闭操作，不影响桌面端使用
• 保留锚点跳转原生功能，避免之前的跳转失效问题

内容的提问来源于stack exchange，提问作者Headhunter Rengar