Comment fermer le menu réduit de Bootstrap 3 lors d'un clic sur un lien ?

Comment fermer le menu réduit de Bootstrap 3 en cliquant sur un lien

Le menu de navigation réduit de Bootstrap 3 offre un moyen pratique de masquer et d'afficher les éléments de navigation sur appareils plus petits. Cependant, cliquer sur un lien de menu alors que le menu est développé peut ne pas le fermer au clic. Cela peut être frustrant pour les utilisateurs car cela empêche une navigation facile.

Solution

Pour résoudre ce problème, vous pouvez ajouter le code suivant à votre document :

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

Ce code écoutera les clics dans le menu réduit et fermera le menu si l'élément cible n'est pas une bascule déroulante. En excluant les boutons déroulants, vous vous assurez que cliquer sur le menu déroulant lui-même ne le ferme pas.

Implémentation

Pour implémenter cette solution, vous pouvez inclure le code dans votre JavaScript ou ajoutez-le directement en bas de la page avant le tag.

Notes supplémentaires

• La solution originale de GitHub, qui vérifiait uniquement si la cible était un élément « a », pouvait provoquer des problèmes avec les sous- menus. La version mise à jour recherche plutôt 'a:not(".dropdown-toggle")' pour éviter cela.
• Cette solution s'applique uniquement à Bootstrap 3.x. Pour Bootstrap 4 et supérieur, la classe .in a été remplacée par .show.

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!