Pourquoi ma navigation réduite Bootstrap 3 reste-t-elle ouverte après avoir cliqué sur les liens du menu ?

La navigation réduite de Bootstrap 3 reste ouverte après avoir cliqué sur les liens du menu

Dans une configuration de navigation typique de Bootstrap 3, cliquer sur les liens de menu dans un menu réduit devrait provoquer la fermeture automatique du menu. Cependant, certains utilisateurs ont rencontré un problème où le menu reste ouvert après la sélection du lien de menu.

Comprendre le problème

Le problème survient car le comportement par défaut de l'effondrement de Bootstrap Le plugin consiste à basculer la visibilité de l'élément lorsque vous cliquez sur son bouton de déclenchement. Cela signifie que cliquer dans le menu réduit lui-même, y compris sur les liens du menu, ne déclenche pas l'action de réduction.

Solution

Pour résoudre ce problème, un écouteur d'événements JavaScript peuvent être ajoutés au document. Cet écouteur détecte lorsqu'un utilisateur clique dans la navigation réduite et la masque automatiquement. Voici un exemple de code :

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});

Explication

• $(document).on lie un écouteur d'événement au document pour les clics sur les éléments correspondant au sélecteur .navbar-collapse.in. Cela garantit que l'événement est déclenché uniquement lorsque la navigation est réduite.
• La condition if vérifie si l'élément cliqué (e.target) est une ancre balise qui n'est pas une bascule déroulante (".dropdown-toggle"). Les bascules déroulantes sont exclues pour éviter de réduire le menu lors de l'accès à leurs sous-menus.
• Si la condition est remplie, la méthode Collaps('hide') est appelée sur l'élément cliqué, ce qui réduit la navigation.

Cette solution garantit que le menu réduit se ferme automatiquement lorsque les utilisateurs cliquent sur les liens du menu, offrant ainsi une expérience de navigation transparente et conviviale.

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!