Animowane menu rozwijane dla szablonu - javascript, jquery, animacja, menu

Nigdy wcześniej nie używałam jQuery i próbujęrób coś naprawdę prostego, ale doprowadza mnie to do szału. Zaprojektowałem szablon dla CMS, a teraz chcę, aby jego menu było animowane. Poniższy rysunek wyjaśnia strukturę menu (co oczywiście jest generowane przez CMS)

Poniższy kod powinien działać, ale nie:

var menuItem = jQuery(".menu:first>li");
var subMenu;
for(var i=0; i<menuItem.length;i++)
{
var li = jQuery(menuItem[i]);
subMenu = li.children("ul");
if (subMenu.length)
li.hover(function(){ li.children("ul").slideToggle(250); });
}

Zasadniczo to, co robię, to zdobycie pierwszego poziomu lis, a następnie dodaj hover słuchacz, mówiąc im, aby animowali swoje dziecko ul (co jest faktycznym podmenu).
Zamiast tego dostaję, gdy wskażę "Produkty"to własne podmenu nie pokazuje, zamiast tego pojawia się podmenu "Kontakt", a gdy wskażę "Kontakt", jego menu podskakuje tak, jak powinno. Uwaga: Brązowy ul jest ustawione, aby wyświetlić: brak
Doceniam każdą pomoc. Z góry dziękuję
PS: Używam jQuery 1.7.1 (jeśli to ma znaczenie)

Odpowiedzi:

Wygląda dość skomplikowanie na to, co próbujesz osiągnąć. Zrobiłbym coś takiego.

$(".menu > li").hover(

//When mouse is over the menu button
function () {
$(this).children("ul").slideDown(250);
},

//When mouse leaves the menu / menu button
function () {
$(this).children("ul").slideUp(250);
}
);

Widzę, co próbujesz zrobić w swoim kodzie, ale myślę, że powinieneś zacząć od dobrych praktyk jQuery.To naprawdę nie jest trudne, zobaczysz, a to uczyni twoje życie o wiele łatwiejsze.

Po pierwsze, nie jestem pewien, czy pętla jest tym, co tychcesz tutaj. jQuery oferuje selektor (który może być użyty z $ jako skrótem) do wybierania klas i jest naprawdę potężny. Zbuduj swoje menu w ten sposób (rodzaj):

<ul id="menu">
<li class="menu-item">Home
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="menu-item">Products
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="menu-item">Contact us
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>

Następnie możesz wybrać pozycje menu za pomocą

$(".menu-item")

i w funkcji najechania, wybierz rozwijanie za pomocą

$(this).childen("ul")

Więc w zasadzie baw się dobrze!