web-dev-qa-db-fra.com

Comment fermer une barre de navigation réduite et ouverte en cliquant à l'extérieur de l'élément de barre de navigation dans Bootstrap 3?

Comment puis-je fermer une barre de navigation réduite en cliquant en dehors de l'élément de barre de navigation? Actuellement, le seul moyen de l'ouvrir ou de le fermer consiste à cliquer sur le bouton navbar-toggle.

Voir ici pour un exemple et un code: 

Jusqu'ici, j'ai essayé ce qui suit qui ne semble pas fonctionner:

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});
javascriptjqueryhtmlcsstwitter-bootstrap-3
33
henrywright

Regardez ça:

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

Votre violon fonctionne avec ça: http://jsfiddle.net/52VtD/5718/

C'est une version modifiée de cette réponse , qui manque d'animation et est aussi un peu plus compliqué.

Je sais que l'invocation de click() n'est pas très élégante, mais collapse('hide') n'a pas fonctionné pour moi non plus et je pense que l'animation est un peu plus agréable que d'ajouter et de supprimer les classes à peine.

40
nozzleman

La réponse acceptée ne semble pas fonctionner correctement. Il suffit de vérifier si "navbar-collapse" a la classe "in". Nous pouvons ensuite déclencher la méthode d’effondrement comme prévu en utilisant notre référence à la barre de navigation.

$(document).click(function (event) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
});
36
Paul Tarr

La solution que j'ai décidé d'utiliser est tirée de la réponse acceptée ici et de cette réponse

jQuery('body').bind('click', function(e) {
    if(jQuery(e.target).closest('.navbar').length == 0) {
        // click happened outside of .navbar, so hide
        var opened = jQuery('.navbar-collapse').hasClass('collapse in');
        if ( opened === true ) {
            jQuery('.navbar-collapse').collapse('hide');
        }
    }
});

Cela masque un menu de navigation réduit lorsque l'utilisateur clique n'importe où en dehors de l'élément .navbar. Bien sûr, en cliquant sur .navbar-toggle, vous pouvez également fermer le menu.

13
henrywright

En utilisant cela fonctionne pour moi.

$(function() {
  $(document).click(function (event) {
    $('.navbar-collapse').collapse('hide');
  });
});
12
Shiva Charan

stopPropagation() n'est pas toujours la meilleure solution. Utilisez plutôt quelque chose comme:

jQuery(document.body).on('click', function(ev){
    if(jQuery(ev.target).closest('.navbar-collapse').length) return; // Not return false

    // Hide navbar
});

Je pense qu'il est dangereux de supposer que vous ne voulez jamais écouter aucun autre événement du .navbar. Ce qui est impossible si vous utilisez stopPropagation().

4
pstenstrm

J'avais un scénario où je n'avais pas de liens et je ne voulais pas que le panneau se ferme si un utilisateur clique sur ces éléments pour un accident. Les autres réponses ici [ fermeront le panneau même si vous cliquez sur le texte d'un élément qui n'est pas un lien.

Pour résoudre ce problème, j’ai ajouté à la réponse de Paul Tarr en encapsulant la solution dans un chèque pour voir si le clic s’était produit ou non à l’intérieur du 

if ($(event.target).parents(".navbar-collapse").length < 1) { }

Le code complet deviendrait:

$(document).click(function (event) {
if ($(event.target).parents(".navbar-collapse").length < 1) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
  }
});

Dans cette démo violon vous pouvez voir que si vous cliquez sur un non-lien à l'intérieur du panneau, il ne sera pas réduit.

1
maxshuty

J'ai ajouté une condition à la réponse de @ nozzleman pour vérifier si le tap ou le clic a été fait sur un élément du menu, et si c'est le cas, ne pas le réduire.

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle") && clickover.parents('.navbar-collapse').length == 0) {
            $("button.navbar-toggle").click();
        }
    });
});
1
sonxurxo
$(document).click(function (event) {
 if ($('.navbar-collapse').attr('aria-expanded') == "true") {
        $('.navbar-collapse:visible').click();
    }
});
0
Venkanna t

Pour Bootstrap 4:

$(document).click(function(event) {
  $(event.target).closest(".navbar").length || $(".navbar-collapse.show").length && $(".navbar-collapse.show").collapse("hide")
});
0
Timur

Pour Bootstrap 4

Bootstrap 4 n'a pas de classe in. Ceci est Coffeescript.

  $(document).click (e)->
    #console.log e.target
    unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
      $('#toggle-menu').collapse('hide')

Donc, en gros, si vous ne cliquez pas sur le bouton ou sur le menu, fermez le menu.

Remarque: étrange, sur iOS, cliquer sur du texte n'enregistre pas d'événement click, ni d'événement mouseup. En cliquant sur une image, les événements sont déclenchés. 

0
Chloe