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 work for me: How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3? The menu disapeares when I click outside the menu, but when I click on the link with a dropdown, the whole menu collapses.

<div class="collapse navbar-collapse nav-mobile" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="list-group panel">
            <a href="#submenu-1" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Webshop</a>
            <ul class="collapse" id="submenu-1">
                <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Industriële verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Promotionele verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Gelamineerde verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Enveloppen &verzend verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Medische verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Co-packing</a>
            </ul>
        </li>
    </ul>

Answer 1

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 2

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

Answer 3

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.