Liste déroulante jQuery personnalisée jQuery Girl

Je crée un menu déroulant simple personnalisé à l’aide de jQuery qui masque / affiche un élément basé sur l’état over.

Le problème que j’ai maintenant est que lorsque vous passez sur l’élément affiché qu’il cache, vous ne pouvez pas déplacer votre souris dans la liste déroulante créée.

Y a-t-il un moyen plus facile de faire ce que j’ai? Je vais réutiliser ceci et je ne suis pas sûr de la meilleure façon de configurer le code car je n’ai pas besoin de copier / coller six fois.

$(function(){ $("#dog-nav").hover( function(){ $(".sub-drop-box-dog").show("fast"); }, function(){ $(".sub-drop-box-dog").hide("fast"); } ); $("#cat-nav").hover( function(){ $(".sub-drop-box-cat").show("fast"); }, function(){ $(".sub-drop-box-cat").hide("fast"); } ); });

Vous devriez utiliser HTML comme ceci:

    Menu1  Submenu A
 Submenu B
 Submenu C
 
 
  Menu2  Submenu D
 Submenu E
 Submenu F

Et puis jQuery comme ça:

 $ ("# menu li"). hover (function () {
   $ (this) .find ("ul"). show ("fast");
 }, une fonction() {
   $ (this) .find ("ul"). hide ("rapide");
 });

Ensuite, lorsque vous survolez les sous-menus, vous survolez toujours le menu principal et celui-ci ne se fermera pas. L’exemple ci-dessus est également flexible, vous n’avez donc pas à l’écrire une fois pour chaque menu.

Pour compenser les erreurs de pilotage de la souris, vous devez vérifier les plugins jQuery.hoverIntent et / ou jQuery.superfish .