Liste déroulante jQuery personnalisée - jQuery, menu déroulant

Je crée un menu déroulant simple personnalisé à l'aide de jQuery qui masque / affiche un élément en fonction de 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 qui a été 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");
}
);

});

Réponses:

Vous devriez utiliser HTML comme ceci:

<div id="#menu">
<ul>
<li>
<a href="#">Menu1</a>
<ul>
<li><a href="#">Submenu A</a></li>
<li><a href="#">Submenu B</a></li>
<li><a href="#">Submenu C</a></li>
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul>
<li><a href="#">Submenu D</a></li>
<li><a href="#">Submenu E</a></li>
<li><a href="#">Submenu F</a></li>
</ul>
</li>
</ul>
</div>

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 besoin de l’écrire une fois pour chaque menu.

Pour corriger une erreur de pilotage de la souris, vous devriez vérifier jQuery.hoverIntent et / ou jQuery.superfish plugins.