Меню начальной загрузки ботстрапа

Question

У меня есть сценарий для меню переключения боковых панелей Bootstrap. Он отлично работает для моих нужд.

В настоящее время меню переключается с помощью кнопки Toggle Menu, это нормально. Но мне нужно закрыть меню, если я нажму, вне его.

Пожалуйста, проверьте this Fiddle

и помочь мне. Благодарю.

$("#menu-toggle").click(function(e) { 
    e.preventDefault(); 
    $("#wrapper").toggleClass("toggled"); 
}); 

Answer 1

Чтобы получить это, вы должны играть с функциями Jquery как .hasClass, .trigger, .is и т.д. Что я сделал есть, я проверил классы по щелчку, а затем в соответствии с ними я писал этот код. Пожалуйста, проверьте

См demo

Подробно: Во-первых я проверить класс, который переключаясь на щелчку a href так я сделал условие, что если #wrapper имеет переключены класс, то мы будем инициировать событие щелчка на #menu-toggle но и мы должны быть осторожны, чтобы щелчок был на теле, но не в href меню боковой панели, поэтому я добавил еще одно условие с тегом. Надеюсь, вы поймете, а если нет, то дайте мне знать.

Answer 2

Добавить событие окна, чтобы проверить, где вы щелкаете,

Вот snnipet:

$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
}); 
 

 
$(window).click(function(e) { 
 
    e.preventDefault(); 
 
    if(e.target.id =="menu-toggle") return; 
 
       
 
    if($(e.target).closest('#sidebar-wrapper').length==0){ 
 
     // small device toogled class added auto so remove it 
 
     if($("#wrapper").width() < 768) 
 
      $("#wrapper").removeClass("toggled"); 
 
     else 
 
      $("#wrapper").addClass("toggled"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/js/bootstrap.min.js"></script> 
 
<link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/simple-sidebar.css" rel="stylesheet"/> 
 
<link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="wrapper"> 
 

 
     <!-- Sidebar --> 
 
     <div id="sidebar-wrapper"> 
 
      <ul class="sidebar-nav"> 
 
       <li class="sidebar-brand"> 
 
        <a href="#"> 
 
         Start Bootstrap 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Dashboard</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Shortcuts</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Overview</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Events</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">About</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Services</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /#sidebar-wrapper --> 
 

 
     <!-- Page Content --> 
 
     <div id="page-content-wrapper"> 
 
      <div class="container-fluid"> 
 
       <div class="row"> 
 
        <div class="col-lg-12"> 
 
         <h1>Simple Sidebar</h1> 
 
         <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
 
         <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
 
         <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!-- /#page-content-wrapper --> 
 

 
    </div>