如何在点击时隐藏可折叠 Bootstrap 4 导航栏
问题：
您已经创建了一个可折叠的 Bootstrap 导航栏，可以顺利打开，但它仍然保持打开状态即使导航到不同的部分后也是如此。您希望它在用户单击链接时自动关闭。
解决方案：
Bootstrap 5（测试版）：
使用JavaScript:
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = bootstrap.Collapse.getOrCreateInstance(menuToggle, {toggle: false})
navLinks.forEach((l) => {
if (menuToggle.classList.contains('show')) { // only fire on mobile
l.addEventListener('click', () => {
bsCollapse.toggle()
})
}
})使用数据属性：
<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
Bootstrap 4:
使用jQuery:
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});使用数据属性：
<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>
Bootstrap 3:
使用jQuery:
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});使用数据属性：
<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>
通过实现这些方法中的任何一个，您的可折叠 Bootstrap 导航栏将在用户单击时关闭在链接上，提供无缝且用户友好的导航体验。
以上是如何在链接单击后自动关闭可折叠引导导航栏？的详细内容。更多信息请关注PHP中文网其他相关文章！
