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

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,