Bootstrap collapse component not closing menu on clicking away

Question

When I click away the menu doesn\'t hide, I found this code at: http://getbootstrap.com/components/#navbar but doesn\'t work as it should.

Answer 1

I had the same problem and the solution was to make sure that bootstrap.js is not referenced more than once. I had it loaded two times in my page and this rendered described problem.

    <script src="/js/bootstrap.min.js"></script>

Do not load it more than once!

Answer 2

This should do

<script>
$(document).on('click',function(){
$('.collapse').collapse('hide');
})
</script> 

This is the reference gist

https://gist.github.com/winnyboy5/8750551

Answer 3

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

^ I had the .js file too far down. Change your lines to look like the above and the responsive button should also close the menu.

Answer 4

The above displayed a weird behavior for me where sometimes a scroll bar would appear on the nav. That could be from some fancy css but the below fixed it for me.

$(document).on('click',function(e){
  if($('#bs-example-navbar-collapse-1').hasClass('in')){
    $('.collapse').collapse('hide'); 
  }
})

Answer 5

There is another solution here, which also works when having sub-menus.

<script>
$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
        $(this).collapse('hide');
    }
});
</script>

Answer 6

I had my Bootstrap.min.js file after jquery and css files. i moved it above and it worked for me.