Bootstrap 3 menu réduit ne se ferme pas sur le clic

J'ai une navigation plus ou moins standard à 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 menu développe le menu, mais si je clique (ou que je touche d'ailleurs) sur un lien de menu, le menu reste ouvert. Que dois-je faire, pour la fermer de nouveau?

113
demandé sur MERose 2014-01-18 14:53:18

23 réponses

Le réglage 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.

43
répondu VCNinc 2014-01-18 11:08:34

Juste pour partager cela à partir de 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 câblé au document, donc vous n'avez pas à le faire sur ready() (vous pouvez ajouter dynamiquement des liens à votre menu et cela fonctionnera toujours), et il n'est appelé que si le menu est déjà développé. Certaines personnes ont signalé un clignotement étrange où le menu s'ouvre puis se ferme immédiatement avec un autre code qui n'a pas vérifié que le menu avait la classe "in".

[UPDATE 2014-11-04] apparemment, lors de l'utilisation de sous-menus, ce qui précède peut causer des problèmes, donc ce qui précède a été modifié en:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
127
répondu Kevin Nelson 2017-12-15 01:01:23

Changez ceci:

<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

115
répondu FullStackDev 2015-10-30 12:33:31

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

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

46
répondu raisercostin 2014-10-16 11:39:36
$(".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

12
répondu Chakradhar Vyza 2015-10-30 12:34:20

J'ai/ai eu des problèmes similaires avec Bootstrap 4, alpha-6 et la réponse deJoakim Johansson ci-dessus m'a commencé dans la bonne direction. Aucun javascript requis. Mettre data-target=".navbar-collapse "et data-toggle= "collapse" dans la balise div à l'intérieur du nav, mais entourant les liens/boutons, a fonctionné pour moi.

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
   <a class="nav-item nav-link" href="#">Menu Item 1</a>
   ...
</div>
9
répondu Paul 2017-05-23 11:47:26

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 à la dernière version (jquery-1.11.2) et tout fonctionne bien.

5
répondu Densol 2015-06-30 14:28:14

Je l'ai fait

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});
5
répondu weaveoftheride 2015-10-30 12:33:55

Bien que la solution affichée précédemment pour changer l'élément de menu lui-même, comme ci-dessous, fonctionne lorsque le menu est sur un petit appareil, elle a un effet secondaire lorsque le menu est sur toute la largeur et étendu, cela peut entraîner une barre de défilement horizontale glissant sur vos éléments de menu. Les solutions javascript 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 ça, je voulais ajouter un commentaire à cette réponse, mais, semble que je n'ai pas assez de crédit pour faire des remarques)

4
répondu Wim Van Houts 2015-05-16 10:43:53

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

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
4
répondu Syed 2018-05-08 13:48:33

Dans le cas où vous souhaitez remplacer manuellement ce comportement en appelant .collapse ('hide') dans la directive d'un angulaire, 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>
1
répondu Mirna De Jesus 2015-08-14 20:10:51

Si vous voulez seulement que votre navigation bascule lorsqu'elle est utilisée sur un écran mobile, il suffit d'ajouter data-toggle="collapse" et data-target="#navbar" à vos éléments a pour fonctionner sur l'écran mobile, mais vous donnera un scintillement étrange 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 attribut personnalisé qui écoute la requête multimédia correspondante et ajoute dans l'attribut data-toggle="collapse"si désiré:

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

L'attribut personnalisé avec Aurelia ressemble à ceci:

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);
      }
    }
  }
}
1
répondu halllo 2017-01-04 14:13:25
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
1
répondu Chit 2017-09-05 08:21:26

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

  1. le menu NAV réduit/basculé se cache lorsque nav "section" (par exemple href="#foobar") est cliqué (problème concernant ce thread).
  2. Active "section" a été mis en évidence avec succès (ie. js a créé avec succès la classe = "active")
  3. barre de défilement verticale ennuyeux trouvé sur nav effondré (seulement 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 à l'id= "" dans votre HTML comme ceci...

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

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

0
répondu Adam Calihman 2015-06-03 22:48:03

Tout ce dont 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>
0
répondu Marodo 2015-10-30 12:35:09

Assurez-vous D'utiliser la dernière version de bootstrap js. J'étais confronté au même problème et à la mise à niveau du bootstrap.le fichier js de bootstrap-3.3.6 a fait la magie.

0
répondu Aman Arun 2016-06-14 20:30:39

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();  }
});})
0
répondu Roddy P. Carbonell 2016-06-21 12:12:54

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 fermé. Dès que j'ai inclus le fichier bootstrap js, tout a fonctionné.

0
répondu Roland 2016-09-25 12:06:46

Essayez simplement de créer une fonction en javascript pour la classe de réduction 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 simple fonctionne pour moi.

0
répondu yasir_mughal 2016-10-03 13:00:56

J'ai eu le problème similaire mais le mien ne resterait pas ouvert il s'ouvrirait / se fermerait rapidement, j'ai trouvé que j'avais jquery-1.11.1.min.js chargement 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 ça aide

0
répondu Vasko 2016-11-09 14:47:33

Le problème peut être que vous utilisez des versions obsolètes de bootstrap ou jquery, ou que vous appelez plus d'une version dans votre balisage.

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

0
répondu Nick 2016-12-12 15:20:54

Vous pouvez simplement vous assurer que vous chargez 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 HTML, vous perdez toute fonctionnalité JavaScript.

0
répondu Chris Johnson 2017-05-09 11:30:19

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".cliquer()".

<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 
-2
répondu Bravo Stefane 2015-10-30 12:37:12