How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?

Question

How can I close an open collapsed navbar on clicking outside of the navbar element? Currently, the only way to open or close it is by clicking on the navbar-toggle button.

See here for an example and code:

So far, I have tried the following which doesn't seem to work:

jQuery(document).click(function() {  });  jQuery('.navbar').click(function(event) {     jQuery(".navbar-collapse").collapse('hide');     event.stopPropagation(); }); 

Answer 1

Have a look that:

$(document).ready(function () {     $(document).click(function (event) {         var clickover = $(event.target);         var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");         if (_opened === true && !clickover.hasClass("navbar-toggle")) {             $("button.navbar-toggle").click();         }     }); }); 

Your fiddle works with that: http://jsfiddle.net/52VtD/5718/

Its a modified version of this answer, which lacks the animation and is also a tiny bit more complicated.

I know, invoking the click() isn't very elegant, but collapse('hide') did not work for me either, and i think the animation is a bit nicer than adding and removing the classes hardly.

Answer 2

The accepted answer doesn't appear to work correctly. It only needs to check if "navbar-collapse" has the "in" class. We can then fire the collapse method as expected by using our reference to the navbar.

$(document).click(function (event) {     var clickover = $(event.target);     var $navbar = $(".navbar-collapse");                    var _opened = $navbar.hasClass("in");     if (_opened === true && !clickover.hasClass("navbar-toggle")) {               $navbar.collapse('hide');     } });