3

現在、サブメニュー付きのメニューを作成しようとしています。これが私がやりたいことです。

リンク（#mylink）にカーソルを合わせると、そのすぐ下にdiv（「#submenu」と呼びます）を表示したいと思います。マウスでこのリンクを離れると、5 秒後に関数を実行したい。

この 5 秒間隔で、div (#submenu) をホバーすると、clearTimeout が必要になります。したがって、この div は 5 秒後に消えることはありません。

これが私のコードです:

$(document).ready(function()
{
    $("#mylink").hover(
        function ()
        {
            $('#submenu').show();
        },
        function()
        {
            var timer = setTimeout(function(){$('#submenu').hide();}, 5000);
        }
    );

    $("#submenu").hover(
        function ()
        {
            clearTimeout(timer);
        },
        function()
        {
            $('#submenu').show();
        }
    );
}
4

4 に答える 4

12

SLaks には正しい答えがありますが、詳しく説明するとvar timer、関数ハンドラーの外に置くことになります。この例ではtimerグローバル変数を作成していないことに注意してください。すべてのハンドラーが使用できるようにスコープを広げているだけです。

$(document).ready(function(){
    var timer;
    $("#mylink").hover(
        function(){
            $('#submenu').show();
        }, function(){
            timer = setTimeout(function(){$('#submenu').hide();}, 5000);
        }
    );

    $("#submenu").hover(
        function(){
            clearTimeout(timer);
        }, function(){
            $('#submenu').show();
        }
    );
}
于 2012-04-24T14:07:29.570 に答える
5

var timerローカル変数です。
そのハンドラの外には存在しません。

グローバル変数にする必要があります。

于 2012-04-24T14:03:20.110 に答える
3

これが私がそれを行う方法です

var timer
$("#mylink").mouseenter(function(){clearTimeout(timer);$('#submenu').show()})
$("#mylink").mouseout(function(){timer = setTimeout(function(){$('#submenu').hide();}, 1000);})
于 2012-04-24T14:14:41.970 に答える
1

#mylink 内に #submenu を配置すると、#submenu の 2 番目のイベント ハンドラーは必要なくなり、次のようになります。

var timer;
$(document).ready(function()
{
    $('#mylink').hover(function()
    {
        clearTimeout(timer);
        $('#submenu').show();
    },function()
    {
        timer = setTimeout(function(){$('#submenu').hide();},5000);
    });
}

ちなみに、これには jQuery は必要ありません。プレーンな js では、コーディングにそれほど長くはかかりません。

于 2012-04-24T14:14:22.893 に答える