2

これを理解するのに苦労しています。愚かなことをお詫びします。

私はこのようなメニューを持っています - 私の選択した形式ではなく、WordPress から自動的に生成されます:

CSS

​.menu_body {
    display: none;   
}​

HTML

<ul id="menu-list">
    <li class="menu_head"><a href="#">Header-1</a></li>
    <li class="menu_head"><a href="#">Header-2</a>
    <ul class="menu_body">
        <li><a href="#">Link-1</a></li>
        <li><a href="#">Link-2</a></li>
    </ul>
    </li>
    <li class="menu_head"><a href="#">Header-3</a>
    <ul class="menu_body">
        <li><a href="#">Link-3</a></li>
        <li><a href="#">Link-4</a></li>
    </ul>
    </li>
    <li class="menu_head"><a href="#">Header-4</a></li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

私がやろうとしているのは、クラス menu_head を持つ項目にカーソルを合わせると、その下にあるクラス「menu_body」の項目を表示する jQuery ホバー ベースの関数を作成することです。

別の場所から、あるメニューを開いて他のすべてのメニューを閉じる機能を使用するのがきちんと整頓されているというアイデアを思いつきました。次のようになります。

$("#menu-list li.menu_head").mouseover(function()
{
 $(this).children('.menu_body').slideDown(500).siblings(".menu_body").slideUp("slow");

});​

それは機能しませんが、私がやろうとしていることを見ることができます - 最初の関連する 'menu_body' アイテムを取得して下にスライドさせ、次に他のすべての 'menu_body' アイテムを取得してそれらを上にスライドさせます。

ここでDIVを使用した例を見ることができます（ここからアイデアを盗みました）：

リンク例

しかし、ネストされた div で機能させるのに非常に苦労しています。

誰かが私が何をする必要があるかを提案し、私が間違っていることを理解できるように説明できますか?

乾杯、

マット

4

4 に答える 4

1

mouseOver と mouseLeave を使用することをお勧めします。

$("#menu-list li.menu_head").mouseOver(function() {
    $(this).children('.menu_body').slideDown(500);
});
$("#menu-list li.menu_head").mouseLeave(function() {
    $(this).children('.menu_body').stop().slideUp(500);
});

そうしないと、別のメニュー要素にスクロールしないと、下のコンテンツを例に挙げると、スライドアップが正しく呼び出されない可能性があります。

例

</p>

于 2012-11-13T17:42:01.127 に答える
1

このようにしてみてください - DEMO

$("#menu-list li.menu_head").mouseover(function() {
    $(".menu_body").stop().slideUp("slow");
    $(this).children('.menu_body').delay(600).stop().slideDown(500);
});

あなたの.menu_bodyアイテムは互いに兄弟ではありません。

于 2012-11-13T17:34:14.753 に答える
0

マット、延期を使用してみてください。

次のようなものが開始ブロックとして役立つ場合があります。

$.when($('div').animate({"opacity": "0"}, 1000)).done(function(){
    // divs hidden, run code to show them
    $('div').animate({"opacity": "100"}, 1000)
});
于 2012-11-14T12:49:03.253 に答える
0

次のように、アニメーション間に遅延を追加します。

$(this).children('.menu_body').slideDown(500).delay(500).siblings(".menu_body").slideUp("slow");
于 2012-11-13T17:36:12.910 に答える