How to Close a Collapsible Bootstrap Navbar on Link Click?

Closing a Collapsible Bootstrap Navbar on Click

Bootstrap 5 (beta)

• Utilize JavaScript to add event listeners on menu items that close the Collapse navbar.

Bootstrap 4

• Add the collapse component to links using data-toggle or utilize jQuery for control.

Bootstrap 3

• Include the collapse component in links using data-toggle, or employ jQuery to hide the navbar on link clicks.

Here's the detailed solution for Bootstrap 3:

markup:

<ul class="navbar-nav mr-auto">
     <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#about-us">About</a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#pricing">Pricing</a>
     </li>
</ul>

jQuery:

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

This method will hide the collapsible navbar after a link is clicked, enhancing user experience and navigation flow.

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