3

jQuery に基づいて開発されたこのタブ ビューを使用します。

https://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html#

イベントによってタブが変わるコードを変更しますmouseenter。そして、イベントの実行を遅らせたいmouseenterので、マウスが要素に入ってしばらくそこにとどまると、他のmouseenter実行が実行されます（マウスがその時間より短い時間で外に出た場合）は実行されmouseenterません。私はこのコードを書きます：

$(document).ready(function () {
        $('a.tab').on('mouseenter', function () {
            var thisElement = $(this);
            setTimeout(function () {
                $(".active").removeClass("active");
                thisElement.addClass("active");
                $(".content").slideUp();
                var content_show = thisElement.attr("title");
                $("#" + content_show).slideDown();
            }, 300);
        });
    });

しかし、要素からマウスを出すとmouseenter実行されます。この問題を解決するにはどうすればよいですか?

ありがとう

4

1 に答える 1

11

タイムアウト ハンドルを保存し、それをキャンセルする必要がありますmouseleave。

var timeout; 

$(document).ready(function () {
    $('a.tab').on('mouseenter', function () {
        var thisElement = $(this);

        if (timeout != null) { clearTimeout(timeout); }

        timeout = setTimeout(function () {
            $(".active").removeClass("active");
            thisElement.addClass("active");
            $(".content").slideUp();
            var content_show = thisElement.attr("title");
            $("#" + content_show).slideDown();
        }, 300);
    });

    $('a.tab').on('mouseleave', function () {
        if (timeout != null) { 
           clearTimeout(timeout); 

           timeout = null;
        }
    });
});
于 2012-04-10T07:40:28.293 に答える