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

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

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

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.

$(".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/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>

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.

Je l'ai fait

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

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)

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

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>

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

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

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.

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>

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.

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

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.

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

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.

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.

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