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
追加された
ビュー: 5
源
ro ru fr es pt de zh hi bn ar tr uk

1 答え

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/

0
追加された
源
これは素晴らしい解決策です
追加された 著者 JCHASE11, 源
これに関する唯一の問題は、ドロップダウンの上にマウスを置いて、別のナビゲーション項目にカーソルを合わせると、ドロップダウンが持続することです。
追加された 著者 JCHASE11, 源
感謝!!!これは大きな助けとなった
追加された 著者 JCHASE11, 源
他の .menu-items にマウスオーバーするイベントハンドラを含めるように、回答とjsfiddleを更新しました。
追加された 著者 Jasper, 源