Bootstrap collapse component not closing menu on clicking away

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'); 
  }
})

This should do

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

This is the reference gist

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

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!

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>