如何在链接单击后自动关闭可折叠引导导航栏？

如何在点击时隐藏可折叠 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中文网其他相关文章！