Comment fermer une barre de navigation ouverte réduite lorsque vous cliquez en dehors de l'élément navbar dans Bootstrap 3?

La réponse acceptée ne semble pas fonctionner correctement. Il suffit de vérifier si "navbar-collapse" a la classe "in". Nous pouvons alors 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');
    }
});

La solution que j'ai décidé d'utiliser a été 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 ouvert si l'utilisateur clique n'importe où en dehors de l'élément .navbar. Bien sûr, cliquer sur .navbar-toggle fonctionne toujours pour fermer le menu aussi.

L'utilisation de cela fonctionne pour moi.

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

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 un autre événement de la .navbar. Ce qui est impossible si vous utilisez stopPropagation().

J'ai ajouté une condition à la réponse de @nozzleman pour vérifier si le robinet ou le clic a été fait sur n'importe quel élément dans le 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();
        }
    });
});

Pour Bootstrap 4

Bootstrap 4 n'a pas de in classe. C'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, fondamentalement, sauf si vous cliquez sur le bouton ou le menu, fermez le menu.

Remarque: étrange, sur iOS cliquer sur le texte n'enregistre pas un événement de clic, ni un événement mouseup. Cliquer sur une image déclenche cependant des événements.

J'ai eu un scénario où j'avais des non-liens et je ne voulais pas que le panneau se ferme si un utilisateur clique sur ces éléments sur accident. Les autres réponses ici sera fermer 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 enveloppant la solution dans une vérification pour voir si le clic s'est produit n'importe où à 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');
    }
  }
});

De cette démo violon vous peut voir que si vous cliquez sur un non-lien à l'intérieur du panneau, il ne le réduira pas.

Pour Bootstrap 4:

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