Maison >interface Web >tutoriel CSS >Pourquoi mon menu réduit Bootstrap 3 reste-t-il ouvert après avoir cliqué sur un lien ?

Pourquoi mon menu réduit Bootstrap 3 reste-t-il ouvert après avoir cliqué sur un lien ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-14 10:51:02679parcourir

Why Does My Bootstrap 3 Collapsed Menu Stay Open After Clicking a Link?

Bootstrap 3 : résolution du problème persistant du menu réduit

Problème :

Dans une navigation Bootstrap 3, le menu réduit reste ouvert après avoir cliqué sur un lien de menu, perturbant l'utilisateur expérience.

Réponse :

Pour résoudre ce problème, implémentez le code suivant :

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

Détails :

  • Cette solution lie un écouteur d'événement au document pour surveiller les clics dans le menu de navigation développé (classe : ".navbar-collapse.in").
  • Lorsqu'un clic se produit sur un lien de menu (élément "a"), la ligne $(this).collapse('hide'); déclenche le repli du menu de navigation.

Mise à jour [2014-11-04] :

  • Pour la navigation avec sous-menus, modifier le code en :
$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
  • Cette modification garantit que seuls les liens de menu qui ne sont pas déroulants les bascules déclenchent l'effondrement du menu.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn