Bootstrap barre latérale gauche de la bascule menu

J'ai un script pour Bootstrap barre latérale bascule menu. Il fonctionne très bien pour mes besoins.

Droit maintenant, le menu est le basculement à l'aide de Basculer le bouton de Menu, c'est très bien.Mais j'ai besoin de fermer le menu, si je clique, à côté d'elle.

Veuillez vérifier ce Violon

et de m'aider. Merci.

$("#menu-toggle").click(function(e) {
     e.preventDefault();
     $("#wrapper").toggleClass("toggled");
});
InformationsquelleAutor ilmk | 2016-08-04
  1. 3

    Pour obtenir ce que vous avez à jouer avec les fonctions jquery comme .hasClass, .trigger, .is etc. Ce que j'ai fait est, j'ai vérifié les classes de la souris, puis selon eux, j'ai écrit ce code. Veuillez vérifier

    Voir démo

    Dans le détail : j'ai d'Abord vérifier la classe qui est le basculement sur cliquez de a href j'ai donc fait une condition que si #wrappera basculé de la classe, puis on déclenche l'événement click sur #menu-toggle mais nous devons aussi prudent que le clic sur le corps, mais pas de la a href côté de la barre de menu, c'est pourquoi j'ai ajouté un autre état avec !la balise. Espérons que vous comprendrez et si non, alors laissez-moi savoir.

    • Mon plaisir et heureux que vous ayez accepté comme réponse 🙂
    InformationsquelleAutor Leo the lion
  2. 1

    Ajouter une fenêtre de l'événement pour vérifier où vous en cliquant sur,

    Ici est un snnipet :

    JS:

    $("#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");
   }  
});

    HTML:

    <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>

    • Vérifier ma réponse , cliquez sur l'inverse ( ouvrir le menu ) dans le petit écran , extrait ci-dessus, j'ai réussi à toujours faire fermer le menu tout ce été dans le petit ou le grand écran
    InformationsquelleAutor Springer F