Besoin d'aide pour créer un menu déroulant jQuery - jQuery

Je viens juste de commencer avec jQuery. Je veux créer un simple menu déroulant "ul" pour améliorer ma compréhension. Le flux de base est le suivant:

"ul.menu li ul" affiche: aucun >> en survol de li, récupère et stocke la hauteur de "ceci" ul >> définit la hauteur de "ce" ul à 0 >> définit l'affichage de manière à bloquer >> animer hauteur à l'original hauteur stockée

Je sais qu'il existe déjà de très bons plugins pour les menus déroulants, mais je veux vraiment lancer le mien pour mieux comprendre jQuery.

Jusqu’à présent, j’ai réussi ce qui suit, très mal fait (voir la version en direct ici - http://jsbin.com/eduvi):

---

var $j = jQuery.noConflict();
$j(document).ready(function(){

// Get height of current hidden ul

$j("ul.menu li").hover(function() {
getHeight($j("ul", this).height());
});
// Set height to 0px

$j("ul.menu li").hover(function() {
$j("ul", this).css({"height":"0px"});
});

// Set display to block

$j("ul.menu li").hover(function() {
$j("ul", this).css({"display":"block"});
});

// Animate height to stored height

$j("ul.menu li").hover(function getHeight(h) {
$j("ul:first", this).stop().animate({ "height" : "100%" } , 400 );
});

// Display height of current hidden ul

function getHeight(h) {
$j("div.test").text("The height for the hidden ul is " + h + "px."); }
});

---

Je voudrais savoir comment puis-je le faire pour utiliser la hauteur d'origine stockée, à la place de ce 100%.

Et deuxièmement, je suis sûr que tout cela peut se résumer à quelques lignes, mais je ne sais pas encore vraiment comment le faire.

Toute aide sera grandement appréciée!

METTRE À JOUR: OK, alors je suis presque là. J'ai utilisé le code affiché par Marve comme base et travaillé dans les autres bits. La seule chose qui ne fonctionne pas, c’est que j’ai besoin de réinitialiser la hauteur de l’UL cachée, à la fin de tout, à sa hauteur initiale, et de régler son affichage sur aucun, de sorte qu’il soit prêt à être survolé encore. Des idées pourquoi cela ne fonctionnera pas?

---

$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).css({height: ulHeight, display:none});   }
);

---

Réponses:

2 pour la réponse № 1

Voici une astuce css simple pour vous aider:

utilisez $ ("ul.menu> li") au lieu de $ ("ul.menu li")

Cela fera que le survol ciblera uniquement le menu sous l'élément de la liste sur lequel vous survolez.

---

2 pour la réponse № 2

C’est génial que vous appreniez jQuery et utilisiez ce problème pour le faire. Bravo pour ça!

Je pense que vous êtes en train de sur-ingénierie de la solution au problème. Jetez un coup d’œil à deux fonctions jQuery intégrées qui aident à réduire l’effort de la solution: glisse vers le bas et glisser vers le haut. Vous trouverez sans aucun doute de nombreuses fonctions utiles dans la documentation jQuery. Cet extrait de code fait une grande partie de ce que vous avez déjà posté:

$j(document).ready(function() {
$j("ul.menu > li").hover(
function() { $j(this).children("ul").stop(true, true).slideDown(); },
function() { $j(this).children("ul").stop(true, true).slideUp(); }
);
});

Le fragment ne gère pas les sous-menus que vous avez dans votre exemple HTML, mais étant donné votre désir d’apprendre, il ne devrait pas être trop compliqué de le mettre en oeuvre.

Voir aussi la documentation sur Arrêtez.

---