Comment réduire une barre de navigation Bootstrap 3 sur un clic extérieur ?

Réduire une barre de navigation Bootstrap 3 en cliquant en dehors de ses éléments

Question : Comment pouvez-vous réduire automatiquement une barre de navigation Bootstrap 3 ouverte lorsque vous cliquez en dehors de sa bornes? Par défaut, vous ne pouvez l'ouvrir ou le fermer que via le bouton bascule de la barre de navigation.

Exemple :

[Exemple et code](lien)

Tentatives initiales :

Le code fourni n'a pas fonctionné travail :

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});

Solution :

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

Explication :

Ce code :

• Écoute les clics n'importe où dans le document.
• Vérifie si le la barre de navigation est ouverte et l'élément cliqué n'est pas le bouton à bascule de la barre de navigation.
• Si les deux conditions sont remplies, il simule un clic sur le bouton à bascule de la barre de navigation, réduisant ainsi la barre de navigation.

Cette approche préserve l'animation de la barre de navigation et est plus conviviale que la définition manuelle des classes CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!