Bootstrap 3 menu réduit ne pas fermer sur le clic

J'ai plus ou moins standard de navigation à partir de bootstrap 3

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

Il s'effondre normalement sur des appareils plus petits. En cliquant sur le bouton de menu élargit le menu, mais si je clique sur (ou de toucher d'ailleurs) sur un lien du menu, le menu reste ouvert. Que dois-je faire, pour la fermer de nouveau?

InformationsquelleAutor Paranoia | 2014-01-18
  1. 46

    Bootstrap est le réglage par défaut est de garder le menu s'ouvre lorsque vous cliquez sur un élément de menu. Vous pouvez modifier ce comportement en appelant .collapse('hide'); sur le jQuery élément que vous souhaitez réduire.

    • Pouvons-nous avoir un exemple de cela serait fait?
    • C'est faux, bootstrap bascule automatiquement "l'effondrement" de la classe. Vous n'avez pas besoin de jquery. Si vous avez un tel comportement, il signifie que quelque chose est incorrect dans votre code html (pour ma part j'ai été y compris les deux jquery et bootstrap, voir la réponse de @raisercostin).
    • Cette réponse est correcte. Bootstrap ne pas fermer le menu une fois les liens sont cliqués par défaut. L'autre réponse est que applicable si les gens de manière incorrecte inclure jQuery deux fois, ce qui n'est pas la bonne réponse à cette question.
    InformationsquelleAutor VCNinc
  2. 130

    Juste pour partager ce à partir de solutions sur GitHub, c'était la réponse:

    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');
    }
});

    C'est câblé pour le document, de sorte que vous n'avez pas à le faire sur prêts() (vous pouvez ajouter dynamiquement des liens vers votre menu et il fonctionnera toujours), et c'est appelé si le menu est déjà développée. Certaines personnes ont signalé bizarre de clignoter lorsque le menu s'ouvre, puis se ferme immédiatement avec un autre code qui n'a pas vérifié que le menu a la classe "in".

    [Mise à JOUR 2014-11-04] apparemment, lors de l'utilisation de sous-menus, le ci-dessus peut causer des problèmes, de sorte que le ci-dessus a modifié à:

    $(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
    • Fonctionne parfaitement. Merci pour le partage!
    • Pouvez-vous expliquer '$(this).effondrement('hide'); " s'il vous plaît. je ne comprends pas d'où "effondrement" vient d'
    • désolé c'est après le passage de la question, mais collapse est une méthode définie par bootstrap et attaché à l'objet jQuery...sans doute, ils se sont re-utiliser pour des fins multiples (accordéon, barre de navigation, etc): getbootstrap.com/javascript/#collapse-usage
    • Mis à jour le code a fonctionné pour moi, les réponses ci-dessus ce n'est pas. Merci!
    • L' "[mise à JOUR 2014-11-04]" travaillé. Comme pour l'autre solution, où il recommande de supprimer les doublons de référence pour bootstrap.js et jquery qui n'est pas nécessaire à la solution. J'ai trouvé cette solution pour résoudre le problème en moins de temps à la taille sur le débogage et avec plus explicite comportement. Merci!!!!. J'espère que cela vous aide, ça m'a aidé.
    • Réponse parfaite! Travaillé comme un charme.

    InformationsquelleAutor Kevin Nelson
  3. 121

    Changer cela: 

    <li><a href="#one">One</a></li>

    à ceci:

    <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>

    Ce simple changement a fonctionné pour moi.

    Ref: https://github.com/twbs/bootstrap/issues/9013

    • Cette solution est parfaite pour l'affichage Mobile, mais il montre afficher/masquer de l'animation des grands écrans, une fois le lien cliqué.
    • Vous devez ajouter .in à la fin de la data-target valeur: data-target=".navbar-collapse.in". De commentaire dans cette réponse: stackoverflow.com/a/21797534/89818
    • Cette solution fonctionne très bien pour moi.Merci
    • cela fonctionne très bien pour moi, mais il rompt le scrollspy, aucune idée de pourquoi cela pourrait être?
    • A travaillé pour moi lors de la mise à jour de code ci-dessus avec @tca réponse. Je suis également en utilisant scrollspy fonctionnalité.
    • C'est de loin la meilleure solution. Pas de javascript, pas de jQuery. Si vous voulez un lien certain de garder le menu ouvert, il suffit de ne pas ajouter ces paramètres. Convient de rappeler que la meilleure réponse. Je vous remercie.
    • il a travaillé comme un charme , merci
    • si vous utilisez <NavLink to="/path"></NavLink> ça ne marchera pas , c'est juste l'effondrement de la bascule , oui il travail avec <a> de balises, mais pas <NavLink> aucune idée , comment le résoudre ?

    InformationsquelleAutor FullStackDev
  4. 51

    J'ai eu le même problème, mais provoquée par l', y compris deux fois bootstrap.js et jquery.js fichiers.

    Sur un seul cliquez sur l'événement a été traité à deux reprises par jquery instances. Une fermée et une ouverte à la bascule.

    • J'ai eu exactement le même problème, mais ne savais pas qu'ils étaient inclus deux fois. Merci de poster ce!
    • Donc, notre stagiaire. Merci pour ce détachement.
    • L'homme! J'ai fait la même chose - je suppose que je suis de retour pour un stage!
    • Si utile! J'avais travaillé sur cela pendant des jours. Cela peut être très fréquent lors de l'utilisation d'une barre de navigation modèle. Attention les gens! 🙂
    • Ce doit être marqué comme meilleure réponse. J'ai eu le même problème de suppression de bootstrap.js résolu le problème
    • Inclus Jquery deux fois
    • A travaillé pour moi. Intéressant que j'ai dû supprimer une classe, afin d'obtenir que cela fonctionne. <li><a data-toggle="collapse" data-target=".navbar-effondrement" href="#tf-contact" class="page-scroll"> qui a ajouté un joli effet de défilement.
    • Cela semblait être mon problème.. merci! Si simple.
    • Comme celui qui sont la modification de l'autre code, j'étais coincé dans cette question pendant deux jours jusqu'à ce que j'ai trouver cette réponse. Merci!
    • Merci beaucoup! A l'origine, je pensais que c'était l'ordre des fichiers (comme certains autres avait un problème avec), mais ensuite j'ai pensé que c'était une question de mal étiqueté classes, mais c'est exactement mon problème.

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

    Ce serait aider dans la manipulation de liste déroulante dans la barre de navigation

    • Cela a réglé mon problème en utilisant bootstrap avec le javascript à partir d'un jssor diaporama créé des problèmes. Ce code crée également un effet intéressant lors de l'expansion et de l'affaissement le menu mobile.
    • ce qui a résolu mon problème, merci!
    • Merci @Chakradhar , il a sauvé mon temps.
    • Merci, j'ai oublié que Laravel 5.5 JS comprend B et Jquery dans le principal fichier js.
    InformationsquelleAutor Chakradhar Vyza
  6. 10

    Je vais avoir/ont eu des problèmes similaires avec Bootstrap 4, alpha-6, et Joakim Johanssonréponse de s au-dessus de moi a commencé dans la bonne direction. Pas de javascript requis. Mettre data-target=".navbar-effondrement" et data-toggle="collapse" dans la balise div à l'intérieur de la nav, mais environnant les liens/boutons, travaillé pour moi.

    HTML:

    <div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
   <a class="nav-item nav-link" href="#">Menu Item 1</a>
   ...
</div>

    • Votre post m'a beaucoup aidé. Cela a résolu pour moi <body data-toggle="collapse" data-target=".navbar-effondrement">
    • Cela a déjà été posté il y a 3 ans. En outre, il rompt l'animation dans le non-affichage mobile.
    InformationsquelleAutor Paul
  7. 6

    Je sais que cette question est pour Bootstrap 3 mais si vous êtes à la recherche de solution pour Bootstrap 4, il suffit de faire ceci:

    $(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
    • Je suis en utilisant BS4 bêta et que votre code fonctionne parfaitement. J'ai essayé toutes les autres solutions suggérées ici avec pas de chance. BS4 a apparemment changé assez que d'autres solutions ne s'appliquent pas.
    • De la pertinence et de garder les choses concomitante avec la mise à jour de l'information - Ce qui devrait être la meilleure réponse.
    • OP spécifié Bootstrap 3, pas 4.
    • Pour les menus à menus déroulants, j'ai utilisé ceci: $(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
    InformationsquelleAutor Syed
  8. 5

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

    • C'est correct pour moi.
    • C'est la réponse correcte. Merci!
    InformationsquelleAutor Densol
  9. 5

    Je n'ai 

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

    Si la solution posté plus tôt pour changer l'élément de menu lui-même, comme ci-dessous, fonctionne lorsque le menu est sur un petit appareil, il a un autre effet quand le menu est sur toute la largeur et élargi, ce qui peut entraîner une barre de défilement horizontale glissant sur les éléments de menu. Le javascript solutions n'ont pas cet effet secondaire. 

    <li><a href="#one">One</a></li> to 
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>

    (désolé de répondre comme cela voulait ajouter un commentaire à cette réponse, mais, me semble que je n'ai pas suffisamment de crédit pour faire des remarques )

    InformationsquelleAutor Wim Van Houts
  11. 2
     $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
    • vérifier la nouvelle version Matthias S 🙂
    • Veuillez expliquer votre code.
    • Tout d'abord, Vous devez ajouter l'id dans votre menu de div, et lorsque vous cliquez sur votre menu puis après tout, le menu sera cacher. Par exemple:- Lorsque vous cliquez sur à propos de nous menu puis reste onglet menu sera cacher.
    • merci à vous, mais s'il vous plaît écrivez que dans votre réponse 😉
    InformationsquelleAutor Chit
  12. 1

    Dans le cas où vous souhaitez modifier ce comportement en l'appelant .effondrement('hide') à l'intérieur d'un angulaire de la directive, voici le code:

    fichier javascript:

    angular
  .module('yourAppModule')
  .directive('btnAutoCollapse', directive);

function directive() {
  var dir = {
    restrict: 'A',
    scope: {},
    link: link
  };
  return dir;

  function link(scope, element, attrs) {    
    element.on('click', function(event) {              
      $(".navbar-collapse.in").collapse('hide');
    });
  }
}

    Html: 

    <li class="navbar-btn">
     <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>
    InformationsquelleAutor Mirna De Jesus
  13. 1

    Si vous ne voulez que votre navigation pour basculer lorsqu'il est utilisé sur un écran de mobile, tout en ajoutant data-toggle="collapse" et data-target="#navbar" à vos éléments de travail sur l'écran, mais vous donnera un étrange scintillement lors d'un clic sur un écran de bureau. Le jQuery solutions ne fonctionnent pas bien si vous êtes dans un Aurelia ou Angulaires de l'environnement.

    La meilleure solution pour moi était de créer un attribut personnalisé à l'écoute de la correspondante de la requête de média et les ajoute dans la data-toggle="collapse"attribut si vous le souhaitez:

    <a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

    L'attribut personnalisé avec Aurelia ressemble à ceci:

    JS:

    import {autoinject} from 'aurelia-framework';

@autoinject
export class CollapseToggleIfLess768CustomAttribute {
  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.attributes.getNamedItem("data-toggle");
      if (dataToggle) {
        this.element.attributes.removeNamedItem("data-toggle");
      }
    } else {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (!dataToggle) {
        var dataToggle = document.createAttribute("data-toggle");
        dataToggle.value = "collapse";
        this.element.attributes.setNamedItem(dataToggle);
      }
    }
  }
}

    InformationsquelleAutor halllo
  14. 0

    J'ai trouvé que, après beaucoup de luttes, d'essai et d'erreur, la meilleure solution pour moi sur jsfiddle. Lien pour l'inspiration jsfiddle.net. Je suis en utilisant bootstrap de la navbar navbar-fixed-top avec l'effondrement et le hamburger de la bascule. Voici ma version sur jsfiddle: jsfiddle Scrollspy barre de navigation. J'étais seulement à l'obtention de la fonctionnalité de base à l'aide des instructions sur getbootsrap.com. Pour moi, le problème était surtout dans le vague les directions et js recommandé par le getbootstrap site. La meilleure partie est que l'ajout de ce bit supplémentaire de js (qui inclut certains de ce qui est mentionné dans le ci-dessus threads) résolu plusieurs Scrollspy questions pour m'y compris:

    1. S'est effondré/basculé nav menu se cache quand nav "section" (ex: href="#foobar") est cliqué (thème de ce fil).
    2. Active "de la section" a pu être mis en évidence (ie. js créé avec succès classe="active")
    3. Verticale de défilement de la barre de effondré nav (uniquement sur les petits écrans) a été éliminé.

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

    topMenu = $("#myScrollspy"),

    ...la valeur "myScrollspy" doit correspondre à l'id="" dans le HTML, comme si...

    <nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">

    Bien sûr, vous pouvez modifier cette valeur à la valeur que vous souhaitez.

    InformationsquelleAutor Adam Calihman
  15. 0

    Tous vous avez besoin est data-target=".navbar-effondrement" dans le bouton, rien d'autre.

    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
    • Cela ne fonctionne pas
    • +1 : Il travaille également par l'ajout de data-toggle="collapse" data-target=".navbar-effondrement" <a /> ou dans mon cas <Link /> dans Meteorjs à Réagir, je vous Remercie.
    • est absolument correct - deux pouces vers le haut.
    • oui, il fonctionne avec <a/> mais il ne fonctionne pas avec <NavLink/> , il s'effondre, mais , <NavLink/> n'est pas de travailler plus , des idées pourquoi ?
    InformationsquelleAutor Marodo
  16. 0

    Veuillez assurez-vous que Vous êtes en utilisant les dernières bootstrap js version. J'ai été confrontée au même problème et juste la mise à niveau de la bootstrap.js fichier de bootstrap-3.3.6 ne la magie.

    InformationsquelleAutor Aman Arun
  17. 0

    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();  }
});})
    InformationsquelleAutor Roddy P. Carbonell
  18. 0

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

    InformationsquelleAutor Roland
  19. 0

    Simple d'Essayer de faire une fonction en javascript pour déroulante effondrement de la classe.

    Exemple:

    JS:

    $scope.toogleMyClass  = function(){

    //dropdown-element

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

};

    Crochet cette fonction pour onClick simple qui fonctionne pour moi.

    InformationsquelleAutor yasir_mughal
  20. 0

    J'ai eu le même problème mais le mien ne voulait pas rester ouvert il allait ouvrir/fermer rapidement, j'ai trouvé que j'avais jquery-1.11.1.min.js chargement avant bootstrap.min.js. Donc j'ai inversé l'ordre de ces 2 fichiers et fixe mon menu. Fonctionne parfaitement maintenant. Espérons que cela aide

    InformationsquelleAutor Vasko
  21. 0

    Le problème pourrait être que vous utilisez une des versions les plus récentes de bootstrap, jquery, OU vous appeler plus d'une version dans votre balisage.

    Il suffit de garder les versions les plus récentes, vous avez seulement besoin de la personne de référence. Résout le problème.

    InformationsquelleAutor Nick
  22. 0

    vous pouvez juste vous assurer que vous êtes en train de charger votre jQuery et Bootstrap.min.js ATF. Votre navigation est la première chose à rendre sur la page, donc si vous avez vos scripts en bas de votre code HTML, vous perdez le code JavaScript de la fonctionnalité.

    InformationsquelleAutor Chris Johnson
  23. 0

    J'ai eu le même problème que sur mobile, mais pour l'Angulaire de l'application et c'est ce que j'ai fait:

    app.component.html

    <nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="col-md-12">
<div class="navbar-header page-scroll">
<button id ="navButton" style="color:red"type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" routerLink="/"><img id="navbrand" class="site-logo"  src="assets/img/yayaka_logo.png"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="dropdown" appDropdown>
<a class="dropdown-toggle" style="cursor: pointer;">
ΤΙ ΕΙΝΑΙ ΤΟ yayaka<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a (click) = "closeMenu()" href="/#about">About</a></li>
<li><a (click) = "closeMenu()" href="/#services">Services</a></li>
</ul>
</li>
<li class="page-scroll">
<a (click) = "closeMenu()" routerLink="/profiles"><strong>Profiles</strong></a>
</li>
</ul>
</div>
</div>
</div>
</nav>

    app.composante.ts

     closeMenu() {
var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
if (isMobile) {
document.getElementById('navButton').click();
}
}

    Espère que cela aide 🙂

    InformationsquelleAutor stathoula
  24. -2

    Mon menu n'est pas une barre de navigation standard, mais j'ai réussi à auto effondrement de la mine, à l'aide d'un "onclick" fonction ".cliquez sur()".

    <div class="main-header">
<div class="container">
<div id="menu-wrapper">
<div class="row">
<div class="logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs">
</div> <!-- /.logo-wrapper -->
<div class="logo-wrapper2 visible-xs col-xs-9">
</div> <!-- /.smaller logo-wrapper -->
<div class="col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center">
<ul class="menu-first hidden-md hidden-sm hidden-xs">
<li class="active"><a href="#">item1</a></li> |
<li><a href="#our-team">item2</a></li> |
<li><a href="#services">item3</a></li> |
<li><a href="#elia">item4</a></li> |
<li><a href="#portfolio">item5</a></li> |
<li><a href="#contact">item6</a></li>
</ul>
<a href="#" class="toggle-menu visible-md visible-sm visible-xs"><i class="fa fa-bars"></i></a>
</div> <!-- /.main-menu -->
</div> <!-- /.row -->
</div> <!-- /#menu-wrapper -->
<div class="menu-responsive hidden-lg">
<ul>
<li class="active" onclick = $(".toggle-menu").click();><a href="#">item1</a></li>
<li><a href="#our-team" onclick = $(".toggle-menu").click();>item2</a></li>
<li><a href="#services" onclick = $(".toggle-menu").click();>item3</a></li>
<li><a href="#elia" onclick = $(".toggle-menu").click();>item4</a></li>
<li><a href="#portfolio" onclick = $(".toggle-menu").click();>item5</a></li>
<li><a href="#contact" onclick = $(".toggle-menu").click();>item6</a></li>
</ul>
</div> <!-- /.menu-responsive -->
</div> <!-- /.container -->
</div> <!-- /.main-header
    • Script en ligne n'est jamais une bonne idée.
    InformationsquelleAutor Bravo Stefane