/ /テンプレートのアニメーションドロップダウンメニュー-javascript、jquery、animation、menu

テンプレートのアニメーションドロップダウンメニュー - javascript、jquery、animation、menu

jQueryを使用したことがないので、本当に簡単なことをしますが、それは私を夢中にさせています。 CMS用のテンプレートを設計しましたが、そのメニューをアニメーション化したいと考えています。 以下の図は、メニューの構造を説明しています(これは明らかにCMSによって生成されます)
メニュー構造

以下のコードは私が働くべきだと思うものですが、そうではありません。

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); });
}

基本的に、私がやっていることは最初のレベルを取得することです lisを追加します hover それらのリスナーは、彼らの子供をアニメートするように彼らに伝えます ul (これは実際のサブメニューです)。
代わりに「製品」をポイントするとそれ自体のサブメニューは表示されず、代わりに「お問い合わせ」のサブメニューがポップアップします!「お問い合わせ」をポイントすると、そのサブメニューが想定どおりにポップアップします。 注意: ブラウン ul display:noneに設定されます
私は助けに感謝します。 少し早いですがお礼を
PS: 私はjQuery 1.7.1を使用しています(重要な場合)

回答:

回答№1は2

あなたが達成しようとしていることにはかなり複雑に見えます。私はこのようなことをします。

$(".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);
}
);

回答№2の場合は1

あなたがコードで何をしようとしているのかはわかりますが、最初に良いjQueryプラクティスから始めるべきだと思います。それは本当に難しいことではありません。そうすれば、あなたの生活はずっと楽になります。

まず第一に、私はループがあなたのものであるかどうかわかりませんここが欲しい。 jQueryはクラスを選択するためのセレクター(ショートカットとして$で使用できます)を提供し、それは本当に強力です。 このようにメニューを作成します(一種):

<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>

次に、メニュー項目を選択できます

$(".menu-item")

ホバー機能で、ドロップダウンを選択します

$(this).childen("ul")

それなら基本的に楽しんでください!