Comment fermer une barre de navigation pliable Bootstrap 3 avec des clics externes ?

Fermeture d'une barre de navigation pliable avec des clics externes dans Bootstrap 3

L'amélioration de l'expérience utilisateur des bascules de la barre de navigation implique la possibilité de fermer une barre de navigation ouverte lors cliquant en dehors de ses limites. Le code fourni tente de résoudre ce problème en utilisant l'écouteur d'événement document.click. Cependant, la mise en œuvre ne parvient actuellement pas à atteindre la fonctionnalité souhaitée.

Solution :

L'extrait de code suivant résout efficacement le problème en surveillant les clics à l'échelle du document. Il examine si l'élément cliqué se trouve dans l'élément navbar. Si la barre de navigation est ouverte (déterminée par la présence de la classe "navbar-collapse in") et que l'élément cliqué ne possède pas la classe "navbar-toggle", l'événement click déclenche un clic sur le bouton navbar-toggle, effectivement réduire la barre de navigation.

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

Cette approche intègre à la fois élégance et fonctionnalité, offrant une fermeture transparente des barres de navigation ouvertes lors de clics externes à eux.

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!