Bootstrap 3 menu réduit ne se ferme pas en un clic

Le paramètre par défaut de Bootstrap est de garder le menu ouvert lorsque vous cliquez sur un élément de menu. Vous pouvez remplacer manuellement ce comportement en appelant .collapse('hide'); sur l’élément jQuery que vous souhaitez réduire.

Juste pour partager ceci des solutions sur GitHub, c’était la réponse populaire:

https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247

 $(document).on('click','.navbar-collapse.in',function(e) { if( $(e.target).is('a') ) { $(this).collapse('hide'); } }); 

Ceci est connecté au document, vous n’avez donc pas à le faire sur ready () (vous pouvez append dynamicment des liens à votre menu et cela fonctionnera toujours), et il ne sera appelé que si le menu est déjà développé. Certaines personnes ont signalé des clignotements bizarres au niveau du menu, puis se sont immédiatement fermés avec un autre code qui ne vérifiait pas que le menu avait la classe “in”.

[MISE À JOUR 2014-11-04] apparemment en utilisant des sous-menus, ce qui précède peut causer des problèmes, donc ce qui précède a été modifié pour:

 $(document).on('click','.navbar-collapse.in',function(e) { if( $(e.target).is('a:not(".dropdown-toggle")') ) { $(this).collapse('hide'); } }); 

Change ça:

 
One 

pour ça:

 
One 

Ce simple changement a fonctionné pour moi.

Réf: https://github.com/twbs/bootstrap/issues/9013

J’ai eu le même problème mais causé par deux fois les fichiers bootstrap.js et jquery.js .

En un seul clic, l’événement a été traité deux fois par les deux instances jquery. Un fermé et un ouvert la bascule.

 $(".navbar-nav li a").click(function(event) { if (!$(this).parent().hasClass('dropdown')) $(".navbar-collapse").collapse('hide'); }); 

Cela aiderait à gérer la liste déroulante dans la barre de navigation

J’ai / eu des problèmes similaires avec Bootstrap 4, alpha-6, et la réponse de Joakim Johansson ci-dessus m’a conduit dans la bonne direction. Aucun javascript requirejs. Placer data-target = “. Navbar-collapse” et data-toggle = “collapse” dans la balise div à l’intérieur du navigateur, mais entourant les liens / boutons, a fonctionné pour moi.

 
 Menu Item 1 ...  

J’ai eu le même problème, j’utilisais jQuery-1.7.1 et bootstrap 3.2.0 . J’ai changé ma version jQuery pour la dernière version ( jquery-1.11.2 ) et tout fonctionne bien.

Bien que la solution affichée précédemment pour modifier l’élément de menu lui-même, comme ci-dessous, fonctionne lorsque le menu est sur un petit appareil, il a un effet secondaire lorsque le menu est en pleine largeur et élargi. éléments de menu . Les solutions javascript n’ont pas cet effet secondaire.

 
One
 to 
One 

(désolé d’avoir répondu comme ça, je voulais append un commentaire à cette réponse, mais, semble-t-il, je n’ai pas assez de crédit pour faire des remarques)

J’ai fait

 $(".navbar-toggle").click(function(event) { $(".navbar-collapse").toggle('in'); }); 

Je sais que cette question concerne Bootstrap 3, mais si vous cherchez une solution pour Bootstrap 4 , faites ceci:

 $(document).on('click','.navbar-collapse.show',function(e) { $(this).collapse('hide'); }); 

Si vous souhaitez modifier manuellement ce comportement en appelant .collapse (‘hide’) dans une directive angular, voici le code:

fichier javascript:

 angular .module('yourAppModule') .directive('btnAutoCollapse', directive); function directive() { var dir = { ressortingct: 'A', scope: {}, link: link }; return dir; function link(scope, element, attrs) { element.on('click', function(event) { $(".navbar-collapse.in").collapse('hide'); }); } } 

Html:

 
 Sign in  

Si vous voulez seulement que votre navigation change quand vous l’utilisez sur un écran mobile, append simplement data-toggle="collapse" et data-target="#navbar" à vos éléments fonctionnera sur l’écran du mobile, mais vous donnera un aspect étrange. scintiller lorsque vous cliquez sur un écran de bureau. Les solutions jQuery ne fonctionnent pas bien si vous êtes dans un environnement Aurelia ou Angular.

La meilleure solution pour moi était de créer un atsortingbut personnalisé qui écoute la requête de média correspondante et ajoute l’atsortingbut data-toggle="collapse" si désiré:

...

L’atsortingbut personnalisé avec Aurelia ressemble à ceci:

 import {autoinject} from 'aurelia-framework'; @autoinject export class CollapseToggleIfLess768CustomAtsortingbute { element: Element; constructor(element: Element) { this.element = element; var mql = window.matchMedia("(min-width: 768px)"); mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList)); this.handleMediaChange(mql); } handleMediaChange(mediaQueryList: MediaQueryList) { if (mediaQueryList.matches) { var dataToggle = this.element.atsortingbutes.getNamedItem("data-toggle"); if (dataToggle) { this.element.atsortingbutes.removeNamedItem("data-toggle"); } } else { var dataToggle = this.element.atsortingbutes.getNamedItem("data-toggle"); if (!dataToggle) { var dataToggle = document.createAtsortingbute("data-toggle"); dataToggle.value = "collapse"; this.element.atsortingbutes.setNamedItem(dataToggle); } } } } 

  $(function(){ var navMain = $("#your id"); navMain.on("click", "a", null, function () { navMain.collapse('hide'); }); }); 

J’ai trouvé cela après beaucoup de lutte, essais et erreurs, la meilleure solution pour moi sur jsfiddle. Lien vers l’inspiration sur jsfiddle.net . J’utilise la barre de navigation navbar-fixed-top de bootstrap avec la bascule et le hamburger basculer. Voici ma version sur jsfiddle: jsfiddle Scrollspy navbar . Je n’obtenais que des fonctionnalités de base en utilisant les instructions de getbootsrap.com. Pour moi, le problème était principalement dans les directions vagues et js recommandé par le site getbootstrap. La meilleure partie était que l’ajout de ce bit supplémentaire de js (qui inclut une partie de ce qui est mentionné dans les discussions ci-dessus) a résolu plusieurs problèmes de Scrollspy, y compris:

1. Le menu de navigation Collapsed / toggled permet de masquer la navigation (section href = “# foobar”) (problème adressant ce thread).
2. Actif “section” a été mis en évidence avec succès (ie. Js créé avec succès class = “active”)
3. La barre de défilement verticale gênante trouvée sur nav réduite (uniquement sur les petits écrans) a été éliminée.

NOTE: Dans le code js ci-dessous (à partir du deuxième lien jsfiddle dans mon post):

topMenu = $ (“# myScrollspy”),

… la valeur “myScrollspy” doit correspondre à la valeur id = “” dans votre code HTML comme ça …

Bien sûr, vous pouvez changer cette valeur à la valeur que vous aimez.

Tout ce dont vous avez besoin est data-target = “. Navbar-collapse” dans le bouton, rien d’autre.

  Toggle navigation     

Assurez-vous que vous utilisez la dernière version de bootstrap js. Je faisais face au même problème et la mise à jour du fichier bootstrap.js à partir de bootstrap-3.3.6 a fait la magie.

C’est le code qui a fonctionné pour moi:

 jQuery('document').ready(function() { $(".navbar-header button").click(function(event) { if ($(".navbar-collapse").hasClass('in')) { $(".navbar-collapse").slideUp(); } });}) 

J’ai eu le même problème, assurez-vous que bootstrap.js est inclus dans votre page HTML. Dans mon cas, le menu s’est ouvert mais n’a pas été fermé. Dès que j’ai inclus le fichier bootstrap js, tout fonctionnait.

Simple Essayez de faire une fonction en JavaScript pour la classe de réduction de la liste déroulante.

Exemple:

JS :

 $scope.toogleMyClass = function(){ //dropdown-element $timeout(function(){ $scope.preLoader = false; $(document).ready(function() { $("#dropdown-element").toggleClass('show'); }); },100); }; 

Accrochez cette fonction à onClick des travaux simples pour moi.

J’ai eu le même problème, mais le mien ne restrait pas ouvert, il s’ouvrirait / se fermerait rapidement, j’ai trouvé que jquery-1.11.1.min.js était chargé avant bootstrap.min.js. J’ai donc inversé l’ordre de ces 2 fichiers et corrigé mon menu. Fonctionne parfaitement maintenant. J’espère que cela aide

Le problème pourrait être que vous utilisez des versions obsolètes de bootstrap ou de jquery, OU vous appelez plusieurs versions dans votre balisage.

Gardez les dernières versions, vous n’avez besoin que d’une seule référence. Résout le problème.

vous voudrez peut-être simplement vous assurer que vous chargez votre ATF jQuery et Bootstrap.min.js. Votre navigation est la première chose à rendre sur la page, donc si vous avez vos scripts au bas de votre code HTML, vous perdez toute fonctionnalité JavaScript.

Mon menu n’est pas un standard de la barre de navigation, mais j’ai réussi à réduire automatiquement le mien, en utilisant une fonction “onclick” et un “.click ()”.

 
 
 
 
 
 
  
 
  
 
 
item1
 | 
item2
 | 
item3
 | 
item4
 | 
item5
 | 
item6
 
  
  
  
  
 
 
item1
 
item2
 
item3
 
item4
 
item5
 
item6