2

ドロップダウンで5秒の時間または遅延を設定するにはどうすればよいですか。

要件は次のとおりです。誰かがメインメニューにカーソルを合わせると、マウスがメインメニューまたはサブメニューから離れている場合にのみ、そのサブメニューが5秒間表示されます。

今のところ、ulの高さをバナー画像の高さまで上げて、マウスをそのバナー領域から移動するまで非表示にならないようにしました。

以下はサイトリンクです： http： //transitions.advisorproducts.com/home

これは1つの参照サイトリンクです：http：//focusyou.com/home（私の要件はこのようなものですが、このコードをコピーしたくないので、自分のコードに実装したいです）

以下はjsです：

$(function()
{
    $("ul.dropdown li").hover(function()
    {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});

前もって感謝します ：）

ここでテストできます：http：//jsfiddle.net/alokjain_lucky/KQAYT/2/

4

2 に答える 2

4

この動作を抽象化し、タイマーなどを処理したくない場合は、次を使用してください：http:
//cherne.net/brian/resources/jquery.hoverIntent.html

それ以外の場合は、タイマーを使用してください。

$(function()
{
    var hideTimer;
    $("ul.dropdown li").hover(function()
    {
        $(this).addClass("hover");
        $('ul', this).css('visibility', 'hidden'); //this should fix the error you mentioned!
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        if(hideTimer) {
            clearTimeout(hideTimer);
            hideTimer = setTimeout(function(){
                $(this).removeClass("hover");
                $('ul:first',this).css('visibility', 'hidden');
            }, 5000);
        }
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});

ただし、jquery hoverIntentプラグイン、ホバリングインテントの優れた抽象化、および手動のタイマー管理は絶対にお勧めしません。

于 2012-07-16T07:42:42.203 に答える
2

これを試して：

$(function()
{
    var timer = 0;
    $("ul.dropdown > li").hover(function()
    {
        if (timer) clearTimeout(timer);
        $("ul.dropdown > li").removeClass("hover");
        $("ul.dropdown > li ul").css('visibility', 'hidden');
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        var link = $(this);
        timer = setTimeout(function(){
            $(link).removeClass("hover");
            $('ul:first',link).css('visibility', 'hidden');
        }, 5000);
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
  1. setTimeout関数は、指定されたミリ秒数の遅延を追加します。
  2. このキーワードはsetTimeout関数内では機能しないため、変数リンクでこの値への参照を使用しました。

コードの実際の例は次のとおりです。http：//jsfiddle.net/alokjain_lucky/KQAYT/

于 2012-07-16T08:26:01.543 に答える