添加data-bs-切换& data-bs-target中断链接
添加data-bs-切换& data-bs-target中断链接
提问于 2021-08-24 06:15:40
我使用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>```Stack Overflow用户
发布于 2021-11-17 14:41:43
有相同的问题，并找到了解决方法。只需用span-tag和所需的数据属性包装您的链接名称。
<a class="nav-link" href="#home">
<span data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
Home
</span>
</a> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68902573
复制相关文章
相似问题
腾讯云开发者
