web-dev-qa-db-fra.com

Bootstrap 3 Masquer le menu déroulant sur l'élément de menu Cliquez sur

Découvrez le violon . J'ai un NAV réactif de base Bootstrap 3 comme suit:

    <div id="navbar" class="navbar navbar-fixed-top navbar-inverse">
        <div class="container">
            <a id="navbar-toggle" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <a class="navbar-brand" href="#">Title Title Title</a>

            <div id="nav-collapse" class="nav-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#option1">Option 1</a></li>
                    <li><a href="#option2">Option 2</a></li>
                    <li><a href="#option3">Option 3</a></li>
                </ul>
            </div>
        </div>
    </div>

Les éléments de navigation renvoient à des sections de la page, plutôt qu'à des pages différentes. J'ai donc besoin de la liste déroulante pour la masquer au clic.

Chaque fois que j'essaie de basculer manuellement le menu déroulant avec jQuery, les fonctionnalités futures du bouton de basculement déroulant sont gâchées:

$("#navbar li a").click(function(event) {
    // check if window is small enough so dropdown is created
    $("#navbar-toggle").is(":visible")
        $("#nav-collapse").toggle();
});

Y at-il une meilleure solution pour cela?

jquerytwitter-bootstrapdrop-down-menuresponsive-designuinavigationbar
15
dougmacklin

Si vous voulez faire cela sans JavaScript, vous pouvez simplement ajouter la donnée-cible et le basculement de données à chaque élément de la liste, comme ceci:

<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option1">Option 1</a></li>
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option2">Option 2</a></li>
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option3">Option 3</a></li>

Pour la barre de navigation, cela ne fonctionne vraiment qu'en mode d'affichage mobile lorsqu'il y a un bouton bascule. Des choses étranges se produisent lorsque la barre de navigation est exposée (le bouton à bascule n'est pas affiché).

24
Charly

Change ça:

$(document).ready(function () {
    $("#navbar li a").click(function(event) {
        // check if window is small enough so dropdown is created
        $("#navbar-toggle").is(":visible")
            $("#nav-collapse").toggle();
    });
  });

pour ça:

$(document).ready(function () {
    $("#navbar li a").click(function(event) {
        // check if window is small enough so dropdown is created
    $("#nav-collapse").removeClass("in").addClass("collapse");
    });
});

Voir http://jsfiddle.net/fw7vh/4/

8
Gloria

Je ne sais pas pourquoi cliquer/taper sur un élément de menu dans un menu déroulant dans une barre de navigation réduite ne permet pas de basculer automatiquement le menu dans Bootstrap. Il y a peut-être un moyen plus gracieux de faire cela, mais voici comment je l'ai corrigé (en utilisant Bootstrap 3.0.3):

<li class="visible-xs">
  <a href="#" data-toggle="collapse" data-target=".navbar-collapse">Link</a>
</li>
<li class="hidden-xs">
  <a href="#">Link</a>
</li>

En gros, il existe deux versions du lien, une qui apparaît chaque fois que la bascule de menu est affichée (largeur du navigateur <768px) qui bascule le menu de la barre de navigation, et une qui ne le réduit pas (largeur de navigateur> 768px). Si vous n’ajoutez pas ce second type, une étrange barre de défilement horizontale animée fantôme apparaîtra lorsque vous essayez de basculer le menu s’il n’y est pas.

3
bhall

Je suis nouveau à Bootstrap mais avec un petit changement au code ci-dessus, il fonctionne à merveille maintenant. N'oubliez pas que lorsque vous cliquez sur le logo, le menu déroulant devrait également se fermer, c'est pourquoi j'ai ajouté l'en-tête navbar à celui-ci!

jQuery(document).ready(function () {
        jQuery(".nav a, .navbar-header a").click(function(event) {
                // check if window is small enough so dropdown is created
               jQuery(".navbar-collapse").removeClass("in").addClass("collapse");
        });
});
2
RMattos

Avec Bootstrap 3.3.4, j’ai réalisé que mon ancienne méthode ne fonctionnait plus. Mis à jour pour:

if ($('div.navbar-collapse').hasClass('in')) {
    $('button.navbar-toggle:visible').click();
}
2
Mark