添加 data-bs-toggle 和 data-bs-target 会破坏链接

Question

我使用 Bootstrap 创建了一个导航栏。我想让导航栏在单击链接后折叠。添加 data-bs-toggle 和 data-bs-target 时，导航栏会恢复，但会破坏链接。如果有人能指出我做错了什么，我将不胜感激。

这是一个JsFiddle演示

      <div class="container">
        <a class="navbar-brand" href="#home"><span class="logo great-vibes">Drip N Dip</span> </a>
        <div class="nav-button">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      </div>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#home"  data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#menu">Menu</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#gallery">Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>```

Answer 1

遇到了同样的问题并找到了解决方法。只需用 span 标签和所需的数据属性包装链接名称即可。

<a class="nav-link" href="#home">
  <span data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
    Home
  </span>
</a>    

在这里找到原文：添加数据切换和数据目标中断导航链接