JQuery скрыть меню начальной загрузки слайдов при щелчке в любом месте на экране

Question

сделал скрипку здесь:
https://jsfiddle.net/r94dq2e4/

Я использую твиттер bootstap версии 3 с горкой в ​​меню слева, когда кнопка Navbar переключения нажата.

Это код JQuery Я использую:

// Nav 
(function ($) { 
    'use strict'; 

    // Toggle classes in body for syncing sliding animation with other elements 
    $('#bs-example-navbar-collapse-2') 
     .on('show.bs.collapse', function (e) { 
      $('body').addClass('menu-slider'); 
     }) 
     .on('shown.bs.collapse', function (e) { 
      $('body').addClass('in'); 
     }) 
     .on('hide.bs.collapse', function (e) { 
      $('body').removeClass('menu-slider'); 
     }) 
     .on('hidden.bs.collapse', function (e) { 
      $('body').removeClass('in'); 
     }); 

})(jQuery); 

Это хорошо работает и на первое нажатия кнопки NavBar переключателя, меню задвигает, при повторном нажатии, меню выскальзывает. Я хотел бы улучшить эту функциональность таким образом, чтобы меню выходило, когда пользователь щелкает в любом месте страницы, кроме самого меню.

Это мой HTML для меню:

Переключение навигации Меню

     <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">  
          <ul class="nav navbar-nav"> 
           <li class="dropdown"> 
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Treatments<b class="caret"></b></a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">Menu Item</span></a></li> 

            </ul> 
           </li> 
           <li><a href="#">About Us</a></li> 
           <li><a href="#">Meet the team</a></li> 
           <li><a href="#">See the results</a></li> 
           <li><a href="#">Cost</a></li> 
           <li><a href="#">Information</a></li> 
          </ul><!-- end navbar-nav --> 
         </div><!-- end navbar-collapse --> 
        </nav><!-- end navbar --> 

Я начал с помощью следующего кода JQuery для достижения этой цели. Но я должен был бы некоторую помощь в том, где пойти отсюда:

/* Nav click outside hide navbar */ 
    $(document).click(function(e){ 

    // Check if click was triggered on or within #menu_content 
     if($(e.target).closest("#navbar2").length > 0) { 
      return false; 
     } 
     // Otherwise 
     // trigger your click function 
     $('body').removeClass('menu-slider'); 
     $('body').removeClass('in'); 

    }); 

Спасибо

Answer 1

Есть 3 вещи, которые вы должны проверить, чтобы увидеть, если вы должны закрыть меню:

1. элемент не сам нав (.nav)
2. элемент не нав контейнер (.navbar-cllapse)
3. элемент не ребенок-элемент нав (.parents('.nav'))

if (!$(e.target).hasClass('navbar-collapse') && !$(e.target).hasClass('nav') && $(e.target).parents('.nav').length == 0) { 
    $('#bs-example-navbar-collapse-2').removeClass('in'); 
} 

Вы можете попробовать в этой скрипкой: https://jsfiddle.net/r94dq2e4/1/