Comment fermer une barre de navigation réduite Bootstrap 3 lors d'un clic extérieur ?

Fermeture de la barre de navigation réduite lors d'un clic à l'extérieur

Pour ignorer une barre de navigation réduite lorsque vous cliquez en dehors de la zone désignée dans Bootstrap 3, la solution suivante peut être implémenté :

La tâche consiste à établir un mécanisme qui détecte les clics de l'utilisateur au-delà de l'élément de la barre de navigation et déclenche la fermeture de la barre de navigation. La tentative initiale utilisant jQuery(document).click(function()) et jQuery('.navbar').click(function()) n'a pas réussi à atteindre cet objectif.

Une approche modifiée intègre un événement de clic écouteur sur l'élément du document :

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

Dans ce code, le clic détermine l'élément où le clic a eu lieu. _opened vérifie si la barre de navigation est actuellement réduite et ouverte. Ensuite, si la barre de navigation est ouverte et que le clic s'est produit en dehors du bouton bascule, le bouton est cliqué par programme, déclenchant la fermeture de la barre de navigation.

Cette solution implémente une animation de réduction en douceur et arrête la propagation de l'événement de clic vers le éléments sous-jacents, garantissant que la barre de navigation se ferme lors d'un clic en dehors de ses limites.

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!