Comment faire pour fermer et ouvrir un s'est effondré barre de navigation lorsque vous cliquez à l'extérieur de la barre de navigation de l'élément dans le Bootstrap 3?

Accepté la réponse ne semble pas fonctionner correctement. Il a seulement besoin de vérifier si "navbar-effondrement" a le "in" de la classe. Nous pouvons alors le feu de l'effondrement de la méthode comme prévu par l'utilisation de notre référence pour 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é prise à partir de la accepté de répondre 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');
        }
    }
});

Ce cache une ouverture s'est effondré nav menu si l'utilisateur clique n'importe où en dehors de la .navbar élément. Bien sûr, en cliquant sur .navbar-toggle travaille toujours pour fermer le menu aussi.

Converti nozzleman réponse pour Bootstrap 4(.3.1):

$(document).ready(function () {
    $(document).click(
        function (event) {
            var target = $(event.target);
            var _mobileMenuOpen = $(".navbar-collapse").hasClass("show");
            if (_mobileMenuOpen === true && !target.hasClass("navbar-toggler")) {
                $("button.navbar-toggler").click();
            }
        }
    );
});

Placé dans le ngOnInit().

Lorsque le document est chargé, ce code attend cliquez sur événements. Si le mobile menu déroulant est ouvert (c'est à dire la réductible partie de la barre de navigation a le "spectacle" de la classe) et de l'objet cliqué (cible) n'est pas le mobile bouton menu (c'est à dire ne pas avoir la "navbar-activation /désactivation" de la classe), puis nous dire le mobile bouton menu il a été cliqué, et le menu se ferme.

J'ai eu un scénario où j'ai eu la non-liens et je ne voulais pas que le panneau de fermer si un utilisateur clique sur l'un de ces éléments sur les accidents. 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 corriger ce que j'ai ajouté sur Paul Tarr réponse par emballage de la solution à une vérification pour voir si oui ou non le clic s'est produit n'importe où à l'intérieur de la

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

Le code devient:

$(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 ce démo de violon vous pouvez voir que si vous cliquez sur un non-lien à l'intérieur du panneau, il ne sera pas le réduire.

Pour Bootstrap 4:

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

$(window).click(function (e) {
     if ($(e.target).closest('.codehim-dropdown').length) {
         return;
     }
     if ($(e.target).closest(offCanvas).length) {
         return;
     }

     //check if menu really opened
     if ($(hamburger).hasClass("active")) {
         closeMenu();
     }

     $(dimOverlay).fadeOut();

     $(".menu-items").slideUp();
     $(".dropdown-heading").removeClass("active");

});