Bootstrap 3 Masquer le Menu Déroulant sur l'Élément de Menu Cliquez sur

découvrez le violon. J'ai une base de Bootstrap 3 réactive nav 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>

La valeur liquidative des éléments de lien vers les articles sur la page, plutôt que de différentes pages donc j'ai besoin de la liste déroulante à cacher sur cliquez sur.

Chaque fois que j'essaie d'alterner la liste déroulante manuellement avec jQuery, il bousille les futures fonctionnalités de la liste déroulante du bouton à bascule:

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

Est-il mieux pour résoudre ce problème?

OriginalL'auteur dougmacklin | 2013-08-09

  1. 24

    Si vous vouliez le faire sans JavaScript, il vous suffit d'ajouter les données de la cible et les données de la bascule à chaque élément de la liste, comme suit:

    <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 que dans le mobile, mode d'affichage 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 visible).

    ou de l'utilisation data-target=".dans" au lieu de data-target=".nav-effondrement" pour éviter d'afficher/masquer du menu pendant l'utilisation normale de la résolution du navigateur.

    OriginalL'auteur Charly

  2. 8

    Changer cela:

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

    :

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

    parfait, merci!

    OriginalL'auteur Gloria

  3. 3

    Je ne sais pas pourquoi en cliquant/tapant sur un élément de menu dans un menu déroulant dans un effondrement de l'navbar ne pas basculer automatiquement le menu dans le Bootstrap. Il y a peut être un plus gracieuse façon de le faire, 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>

    Fondamentalement, il existe deux versions du lien, celle qui apparaît à chaque fois que le menu de la bascule est indiqué (au navigateur largeurs <768px) qui permet de basculer la barre de navigation de menu, et un qui ne s'effondre pas (navigateur largeurs >768px). Si vous n'ajoutez pas de deuxième type, il va montrer un étrange fantôme animé barre de défilement horizontale lorsque vous essayez de basculer le menu quand il n'est pas là.

    OriginalL'auteur bhall

  4. 2

    Je suis nouveau sur Bootstrap, mais avec une petite changé le code ci-dessus, il fonctionne à merveille maintenant. Rappelez-vous que lorsque vous cliquez sur le logo ou sur le menu déroulant devrait fermer trop, c'est pourquoi j'ai ajouté navbar-d'en-tête de!

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

    OriginalL'auteur RMattos

  5. 2

    Avec Bootstrap 3.3.4 j'ai réalisé mon ancienne façon de cesser de travailler. Mis à jour à:

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

    OriginalL'auteur Mark