Jqueryのドロップダウンがホバー上で消えます。

Question

Jqueryのドロップダウンがホバー上で消えます。

私は典型的なナビゲーションバーを設定し、ある要素（ "Our Teams"）上にマウスを置くと、ドロップダウンが表示されます（下のjqueryを使用）。

$("li#menu-item-20").hover(function(){
            $("#dropdown").stop().fadeIn(500);
        }, function(){
            $("#dropdown").stop().fadeOut(500);
        });

ドロップダウン（ #dropdown ）の上にカーソルを置くと、ドロップダウンメニューが消えます（メニュー項目から離れているため）jqueryが機能するようにするため、ドロップダウンにカーソルを合わせるとドロップダウンメニューとナビゲーションメニューを表示した後にフェードアウトします。

Any ideas? You can see a working example at http://pixelcakecreative.com/cimlife/

1

追加された 27 10月 2011 〜で 08:06 著者 JCHASE11

ビュー: 8

源

1 答え

著者 Jasper · Answer 1 · 2011-10-27T08:10Z

mouseleave イベントを #dropdown 要素にバインドすると、ユーザーがドロップダウンをマウス・アウトするまでドロップダウンが保持されます。

//Note: no need for the `li` here as there will only be 1 element with this id on the document
$('#menu-item-20').bind('mouseenter', function() {
    $("#dropdown").stop(true, true).fadeIn(500);
});
$('#menu-nav').children('.menu-item').not('#menu-item-20').bind('mouseenter', function() {
    $("#dropdown").stop(true, true).fadeOut(500);
});
$('#dropdown').bind('mouseleave', function() {
    $("#dropdown").stop(true, true).fadeOut(500);
});

Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/kED9T/2/