How to Automatically Close a Collapsible Bootstrap Navbar After Link Click?

How to Hide Collapsible Bootstrap 4 Navbar on Click

Problem:

You've created a collapsible Bootstrap navbar that opens smoothly, but it remains open even after navigating to different sections. You want it to close automatically when a user clicks on a link.

Solution:

Bootstrap 5 (Beta):

Using 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() 
        })
    }
})

Using Data Attributes:

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

Bootstrap 4:

Using jQuery:

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

Using Data Attributes:

<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>

Bootstrap 3:

Using jQuery:

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

Using Data Attributes:

<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>

By implementing any of these methods, your collapsible Bootstrap navbar will close whenever a user clicks on a link, providing a seamless and user-friendly navigation experience.

The above is the detailed content of How to Automatically Close a Collapsible Bootstrap Navbar After Link Click?. For more information, please follow other related articles on the PHP Chinese website!