Twitter Bootstrap responsive menu/small devices: close/collapse menu on clicking a menu item

Question

I want to change the behaviour of the Twitter Bootstrap Menu on small devices to close the expanded menu by either clicking on a menu item or clicking the menu button. Currently (default) I can only collapse it by clicking the menu button in the top right corner, no matter if I'd clicked on a link/menu item or not. How would I do that? I coudln't figure it out from the TB documentation and searching the internet didn't provide any answers.

Answer 1

Thanks for the fix Skelly. It worked great on the "mobile" menu, but unfortunately it was causing a visual defect in "desktop" mode as it was targeting .nav-collapse, and this class is active in both modes. So, I made a slight modification:

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

This modification will only invoke the 'hide' functionality when the menu is in "mobile" mode.

Note: This is only tested on Bootstrap 3.

Answer 2

You can try something like..

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

This will work for menu links that are referencing '#'. The menu should already be collapsing if your menu links navigate to another page on the site as this would cause a full page refresh.

Answer 3

You can do that by using HTML, add data-toggle="collapse" data-target=".in" to anchor

Example:

<li><a href="#" data-toggle="collapse" data-target=".in">Link</a></li>