Bootstrap: How to close an open collapsed navbar when clicking outside of the MENU?

Question

I want to have my menu closed when the user clicks outside the menu, not only outside the navbar element. Because I have more collapses in my menu, this solution did not wor

Answer 1

Here is my take on this:

$(document).on('click', function(event){
  var $clickedOn = $(event.target),
      $collapsableItems = $('.collapse'),
      isToggleButton = ($clickedOn.closest('.navbar-toggle').length == 1),
      isLink = ($clickedOn.closest('a').length == 1),
      isOutsideNavbar = ($clickedOn.parents('.navbar').length == 0);

  if( (!isToggleButton && isLink) || isOutsideNavbar ) {
    $collapsableItems.each(function(){
      $(this).collapse('hide');
    });
  }
});

This solution handles:

• single page website/applications (and will work on multi-pages too).
• clicks on:
  • .navbar-toggle elements (could be <buttons> or <a>, and it handles clicks on potential inner elements like <span> or <strong> or whatever).
  • on simple <a> elements (again, it handles clicks on inner elements).
  • just outside some particular parent (ie. .navbar).
• multiple collapsable (.collapse) elements that might be open (indistinct to where they are placed in the DOM).

Not enough for you? No problem. You can customize most of the selectors passed to jQuery (document, .collapse, .navbar, etc) to suit your needs or even add more conditions.

Answer 2

You can use this to collapse if not clicking a link: fiddle

$(document).click(function(e) {
    if (!$(e.target).is('a')) {
        $('.collapse').collapse('hide');        
    }
});

Answer 3

another alternative, you can add code below :

<script>
	$(document).ready(function(){
		$(".list-group ").hover(            
		function() {
			$('.collapse', this).stop( true, true ).slideDown("fast");
			$(this).toggleClass('open');        
		},
		function() {
			$('.collapse', this).stop( true, true ).slideUp("fast");
			$(this).toggleClass('open');       
		}
		);
	});
</script>

another example : dtc-eng