Comment fermer une barre de navigation Bootstrap sur un clic externe ?

Fermeture d'une barre de navigation ouverte lors d'un clic externe à l'aide de Bootstrap

Lorsque vous travaillez avec une barre de navigation réduite dans Bootstrap 3, il est utile de pouvoir fermer en cliquant en dehors de la zone de la barre de navigation. Pour y parvenir, vous pouvez utiliser le code JavaScript suivant :

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

Ce code surveille tous les clics sur les documents. Lorsqu'il détecte un clic en dehors de l'élément de la barre de navigation (tel que déterminé par la variable clickover), il vérifie si la barre de navigation est actuellement ouverte (_opened). Si la barre de navigation est ouverte et que l'élément cliqué n'est pas le bouton "navbar-toggle", cela déclenche un clic sur le bouton bascule, fermant ainsi la barre de navigation.

L'extrait de code que vous avez fourni ne fonctionne pas car il fonctionne ne vérifiez pas si la barre de navigation est déjà ouverte avant d'essayer de la fermer. De plus, il utilise jQuery('.navbar').click(...), qui se déclenchera également lors des clics dans la barre de navigation, empêchant les clics externes de la fermer.

En utilisant le code modifié fourni dans le réponse, vous pouvez vous assurer qu'une barre de navigation ouverte se ferme lorsque vous cliquez en dehors de celle-ci, améliorant ainsi l'expérience utilisateur et le flux de navigation.

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!