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); });
}
基本的に、私がやっていることは最初のレベルを取得することです li
sを追加します 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")
それなら基本的に楽しんでください!