Home >Web Front-end >CSS Tutorial >How to Automatically Close a Collapsible Bootstrap Navbar After Link Click?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-12-17 00:54:25148browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn