1

典型的なナビゲーションバーを設定しました。1つの要素(「OurTeams」)にカーソルを合わせると、ドロップダウンが表示されます(以下のjqueryを使用)。

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

次にドロップダウンにカーソルを合わせると(#dropdown)ドロップダウンがフェードアウトします(メニュー項目にカーソルを合わせたため)ドロップダウンにカーソルを合わせるとjqueryが機能する必要があり、ドロップダウンにカーソルを合わせるとフェードアウトしますANDナビゲーションメニュー。

何か案は?http://pixelcakecreative.com/cimlife/で実際の例を見ることができます

4

1 に答える 1

0

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);
});

上記のソリューションのjsfiddleは次のとおりです。http://jsfiddle.net/jasper/kED9T/2/

于 2011-10-27T20:10:42.407 に答える