Fermer la barre de navigation réactive automatiquement

Je suis à l'aide d'un Bootstrap responsive barre de navigation. Lorsque la barre de navigation est effondré et j'ai ouvrez le menu et cliquez sur un élément de menu, le menu ne se ferme pas automatiquement, et je dois le faire moi-même manuellement.

Est-il possible de faire le menu se ferme automatiquement après avoir cliqué sur l'un des boutons?

Sachez que tous les ci-dessous les réponses depuis ce commentaire date sera également vous empêcher de vous de cliquer sur un menu déroulant dans le menu lui-même.
Mais l'Aug-Sep réponses avec a:not(.dropdown-toggle) ne vous permettent de cliquer sur un menu déroulant. Mais aussi être conscient que presque toutes ces réponses donner une FOUC lorsqu'ils sont visualisés sur un ordinateur de bureau, ou faire un menu visible redessiner. Un rapide hack pour résoudre ce problème est de sélectionner sur la taille de la fenêtre: if($(window).width() < 480) $(".navbar-collapse").collapse('hide');
Je souhaite que ce fut à condition que le comportement par défaut par twitter bootstrap

InformationsquelleAutor | 2013-01-09

twitter-bootstrap

41

Edit:
Comme Maximus points ci-après, le 3.x bootstrap solution est:
```
$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});
```
https://jsfiddle.net/yohuLuj2/

Vieille Réponse pour 2.x bootstrap:

Vous devriez être en mesure de le faire par l'ajout d'un gestionnaire de clic sur les éléments de la liste et la fermeture de la valeur liquidative de cette façon.
```
$('.nav-collapse').click('li', function() {
    $('.nav-collapse').collapse('hide');
});
```
Heres un jsfiddle:
http://jsfiddle.net/hajpoj/By6ym/4/
- Merci est parfait 😀
- N'oubliez pas de réinitialiser manuellement le bouton apparence: $('.navbar-toggle').addClass ("effondré");
- n'est-il pas .navbar-collapse ?
- Je suis en train de faire la même chose dans d'inspection de l'Appareil de l'outil de google Chrome, 58. Ce n'est pas de travail là-bas. Quelqu'un peut-il proposer une alternative, ou de raconter le problème?
InformationsquelleAutor hajpoj
44

Solution de travail pour bootstrap 3
```
$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});
```
- C'était la seule pour moi sur BT3
- Bravo Monsieur, Bravo!
- ne encore si vous avez une liste déroulante dans le menu?
- ne fonctionne pas si vous avez sous-menu
InformationsquelleAutor Maximus
32

Je viens de reproduire le 2 attributs de la btn-navbar (data-toggle="collapse" data-target=".nav-effondrement") sur chaque lien comme ceci:
```
<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
  </ul>
</div>
```
- Un non-jquery solution fonctionne beaucoup mieux et est plus facile à gérer!
- Meilleure réponse ici si vous utilisez un framework comme Angulaires et ne veux pas encombrer le contrôleur.
- Si jamais vous l'utiliser sur un non-menu réduit, vous obtenez toujours l'effondrement de l'affect, qui a l'air très bizarre.
- Vous devez ajouter .in à la fin de la data-target valeur: data-target=".navbar-collapse.in". De commentaire dans cette réponse: stackoverflow.com/a/21797534/89818
InformationsquelleAutor Zu1779
9

Seule chose que je voudrais ajouter à jason solution est l'exception pour les listes déroulantes. Vous ne voulez pas fermer votre menu si quelqu'un est tout simplement en cliquant sur pour basculer le sous-menu. Alors...
```
$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    $(".navbar-collapse").collapse('hide');
});
```
InformationsquelleAutor Mike Eberly
8

@Mike déroulant solution a fonctionné pour moi, sauf que les éléments dans la liste déroulante de la bascule ne pas masquer le menu j'ai donc fait en sorte d'ajouter ceci:
```
$('.navbar-collapse .dropdown-menu').click(function(){
    $(".navbar-collapse").collapse('hide');
});
```
InformationsquelleAutor Sarah Wever
3

N'oubliez pas de parcourir l'arborescence du DOM et de fermer les associés barre de navigation, et pas tous les Navbars. En particulier pour Bootstrap 3, utiliser quelque chose de similaire à l'extrait de code suivant:
```
$("body").on("click", ".navbar-collapse a", function() {
  var $this = $(this);

  setTimeout(function() {
     $this.closest(".navbar-collapse").collapse('hide');
  }, 350);
});
```
InformationsquelleAutor Behrang
3

Un autre problème, c'est quand vous voyez la barre de navigation sur le bureau, il essaie de masquer/afficher la barre de navigation, j'ai donc fait ceci:
```
$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    if($(window).width() < 768 )
        $('.navbar-collapse').collapse('hide');
});
```
- Je ne comprends pas votre commentaire, mais votre addition($(window.width()) empêche un méchant FOUC vu sur un site de bureau, donc +1.
InformationsquelleAutor Sergio

Je complète les réponses en ajoutant le bouton cliquez sur gestion:

$(document).on('click', '.navbar-collapse.collapse.in a:not(.dropdown-toggle)', function() {
    $(this).closest(".navbar-collapse").collapse('hide');
});
$(document).on('click', '.navbar-collapse.collapse.in button:not(.navbar-toggle)', function() {
    $(this).closest(".navbar-collapse").collapse('hide');
});

Changé la requête sélecteur en ajoutant: '.l'effondrement.dans " pour sélectionner uniquement ouvert barre de navigation.

InformationsquelleAutor Camel

Mon problème, je n'avais création unique de mise en page avec des ancres. Ainsi, lorsque vous réduire la taille de la fenêtre, le menu masquer sur le lien cliquez sur parfaitement. Grâce à l'utilisateur ci-dessus qui m'a donné l'idée. Mais, lors de la migration de la fenêtre, le lien de l'événement toujours là (sans rechargement, tout de même). Donc, voici ce que j'ai fait. Espérons que cela aide quelqu'un 🙂

jQuery.noConflict();
(function($){
    $('ul#menu-menu-with-anchors li a, a[href="#top"]').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top - ($('body').hasClass('admin-bar') ? 160 : 130)
        }, 500);
        return false;
    });

    bindUnbindNavToggle($);
    $(window).resize(function(){
        bindUnbindNavToggle($);
    });

})(jQuery);

function bindUnbindNavToggle($){
    if( $('button.navbar-toggle').css('display') != 'none' ) {
        $('.navbar-collapse ul li a').on('click', function(){
           $('.navbar-collapse').collapse('hide');
            return false;
        });
    }
    else {
        $('.navbar-collapse ul li a').on('click', function(){
            return false;
        });
    }
}

InformationsquelleAutor Haroon

Si vous utilisez Angulaire, vous pouvez lier l'effondrement de la route de navigation:

$scope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse('hide'); });

InformationsquelleAutor miz

Suffit de mettre ce code dans main.js

 $(document).on('click', '.navbar-collapse.in', function (e) {
    if ($(e.target).is('a')) {
        $(this).collapse('hide');
    }
});

InformationsquelleAutor Joee

0

Peut-être besoin de quelqu'un pour cacher menu lorsque vous cliquez à un autre endroit (j'ai supposé comme il n'y a pas de sous-menus). Ensuite, il suffit d'ajouter ce code quelque part après jquery, bootstrap.js
```
$('button.navbar-toggle').focusout(function(){
        $(".navbar-collapse").collapse('hide');
    });
```
InformationsquelleAutor Rauan Rahmet

Vous devez vous connecter pour publier un commentaire.