Bootstrap 3 Mobile nav won collapse when you click outside it

Question

My Bootstrap 3 mobile menu does collapse when I click/touch outside the menu.

Ive can up with a solution to the problem:

$(document).on('touchstart click', 'html:not(nav)',function() {
 $(".navbar-collapse").removeClass("in");
});

However this doesn't collapse the same way as if you were to click the menu button. Please can somebody recommend a better solution.

Cheers Al

Answer 1

$(document).on('click',function(){
  $('.navbar-collapse').collapse('hide');
})

Demo