web-dev-qa-db-fra.com

Bootstrap 3 menu réduit ne se ferme pas au clic

J'ai une navigation plus ou moins standard 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, le menu s’agrandit mais si je clique (ou touche d’ailleurs) sur un lien de menu, le menu reste ouvert. Que dois-je faire pour le refermer?

htmlcsstwitter-bootstrapnavigation
119
Paranoia

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.

47
VCNinc

Juste pour partager cela à partir de solutions sur GitHub, voici 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 besoin de le faire avec 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 bizarre du fait que 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".

[MISE À JOUR 2014-11-04] apparemment lors de l'utilisation de sous-menus, ce qui précède peut poser problème, ce qui a entraîné la modification de ce qui précède: 

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

Change ça:

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

pour ça:

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

Ce simple changement a fonctionné pour moi.

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

121
FullStackDev

J'ai eu le même problème, mais causé en incluant deux fois bootstrap.js et jquery.js fichiers.

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

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

Cela aiderait à gérer le menu déroulant dans la barre de navigation

16
Chakradhar Vyza

J'ai/ai eu des problèmes similaires avec Bootstrap 4, alpha-6, et Joakim Johansson la réponse ci-dessus m'a permis de progresser dans la bonne direction. Pas de javascript requis. Mettre data-target = ". Navbar-collapse" et data-toggle = "collapse" dans la balise div à l’intérieur du nav, mais entourer les liens/boutons ont 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>
10
Paul

Je sais que cette question est pour Bootstrap mais si vous cherchez une solution pour Bootstrap 4, procédez comme suit:

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

J'ai fait

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

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

5
Densol

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

4
Wim Van Houts
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
2
Chit

Si vous souhaitez uniquement que votre navigation bascule lorsqu'elle est utilisée sur un écran mobile, il vous suffit d'ajouter data-toggle="collapse" et data-target="#navbar" pour que vos éléments a fonctionnent sur l'écran de votre mobile, mais vous donneront un étrange scintillement lorsque vous cliquez dessus. écran de bureau. Les solutions jQuery ne fonctionnent pas bien si vous vous trouvez 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 vous le souhaitez:

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

Assurez-vous que vous utilisez la dernière version de bootstrap js. Je faisais face au même problème et la mise à niveau du fichier bootstrap.js à partir de bootstrap-3.3.6 a fonctionné de façon magique.

1
Aman Arun

Si vous souhaitez remplacer manuellement ce comportement en appelant .collapse ('hide') dans une directive 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
Mirna De Jesus

J'ai eu le même problème, mais le mien ne resterait pas ouvert, il s'ouvrirait/se fermerait rapidement. J'ai constaté que jQuery-1.11.1.min.js se chargeait avant bootstrap.min.js. J'ai donc inversé l'ordre de ces 2 fichiers et réparé mon menu. Fonctionne parfaitement maintenant. J'espère que ça aide

0
Vasko

J'ai eu le même problème uniquement sur mobile, mais pour une application Angular et voici 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.component.ts

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

J'espère que ça aide :)

0
stathoula

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
Roddy P. Carbonell

J'ai trouvé qu'après beaucoup de difficultés, d'essais et d'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 effondrement et hamburger. Voici ma version sur jsfiddle: jsfiddle Scrollspy navbar . J'obtenais seulement les 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é par le site getbootstrap. La meilleure partie était que l'ajout de ce petit extra de js (qui inclut une partie de ce qui est mentionné dans les discussions ci-dessus) a résolu plusieurs problèmes avec Scrollspy, notamment:

  1. Le menu de navigation réduit/activé est masqué lorsque vous cliquez sur la "section" de la navigation (par exemple, href = "# foobar") (le problème concernant ce sujet).
  2. La "section" active a été mise en évidence avec succès (c.-à-d. Que js a créé avec succès class = "active")
  3. La barre de défilement verticale gênante trouvée sur le navigateur effondré (uniquement sur les petits écrans) a été supprimée.

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

topMenu = $ ("# myScrollspy"),

... la valeur "myScrollspy" doit correspondre à l'identifiant id = "" dans votre code HTML comme si ...

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

Bien sûr, vous pouvez modifier cette valeur comme vous le souhaitez.

0
Adam Calihman

Tout ce dont vous avez besoin est data-target = ". Navbar-collapse" 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
Marodo

Simple Essayez 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);

};

Décrochez cette fonction à onClick travaux simples pour moi.

0
yasir_mughal

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

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

0
Nick

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

0
Roland

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

0
Chris Johnson