Besoin d'aide pour corriger ce script dropdown jQuery

Question

Je travaille sur un script pour un menu déroulant. Cela fonctionne bien jusqu'à maintenant, mais je dois ajouter une chose de plus et je ne peux pas le comprendre. Voici le script actuel:

---

$j('ul.menu > li').hover(

    function() { var ulHeight = $j('ul', this).height(); $j(this).children('ul').css({height: 0}).stop().animate({height: ulHeight}, 400); }, 
    function() { $j(this).children('ul').stop().animate({height: 0}, 400); } 
); 

---

je dois revenir à la hauteur de l'UL à sa taille d'origine, et régler l'affichage sans pareil, il peut fonctionner à nouveau. La façon dont il est maintenant, la hauteur est fixée à 0 à la sortie, la prochaine fois que la « ulHeight » est prise, elle est 0.

Je l'ai essayé comme ça, mais pas de joie:

---

function() { $j(this).children('ul').stop().animate({height: 0}, 400).css({height: ulHeight}); } 

---

Quelqu'un a des idées?

Answer 1

Vos sous-menus ne s'affichent pas du tout ...

mais finalement, pourquoi réinventer la roue? http://css-tricks.com/simple-jquery-dropdowns/ ou Superfish

---

La seule chose que je suggère, maintenant que je l'ai regardé votre nouveau code, est de remplacer

.css({"display": "block"}); 
.css({"display": "none"}); 

avec

.show(); 
.hide(); 

respectivement, et vous pouvez utiliser .hover au lieu de .mouseenter et .mouseleave

Check it out here ... Je ne pouvais pas éditer votre code dans jsbin (la fenêtre d'édition avait 3 lignes de haut et je ne pouvais pas faire défiler) donc je l'ai republié à pastebin.

Answer 2

La valeur par défaut de la propriété height est auto. Vous devriez le mettre à cela, au lieu de 0, lorsque vous vous cachez.