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:

• Home (current)
• About
• Pricing

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!