-1

私はこの状況を持っています:私のメニューにはいくつかの非表示の要素があり、ホバーした後、この要素が表示されます。すべて問題ありません。タイムアウトなどがありますが、ホバーした要素を離れると、サブメニューが非表示になります。すべてのメイン メニュー要素を変更した後にこのサブメニューを非表示にしたくないので、このタイムアウトを設定しました。「タイムアウト領域」にいる場合はサブメニューにアクセスできます。メインメニュー要素からマウスが出ると問題が発生し、タイムアウトは機能しますが、この間隔の後、サブメニューが非表示になります。「タイムアウト領域」にいるときにサブメニューを表示したままにするにはどうすればよいですか? それが明確な説明であることを願っています...

ここに画像の説明を入力

と私のコード:

$('.main_menu ul li').hover(function() {
    var self = this;
    setTimeout(function() {
        $(self).children('.sub_menu_main').addClass('opened');
    }, 200);
}, function() {
    setTimeout(function() {
        $('.main_menu ul li').children('.sub_menu_main').removeClass('opened');
    }, 200);
});

または、これは次のように機能します。

var main_menu_element = $('.main_menu ul li');
main_menu_element.on({
    mouseenter: function(){
        var self = this,
            time = 500;
        $(self).data('timer', setTimeout(function(){
            $(self).children('.sub_menu_main').addClass('opened');
        }, time));
    },
    mouseleave: function(){
        var self = this,
            time = 500;
        setTimeout(function() {
            $(self).children('.sub_menu_main').removeClass('opened');
        }, time);
    }
});
4

2 に答える 2

1

変数を setTimeout 関数に設定してから、ユーザーがマウスオーバーした場合にタイムアウトをクリアできます。

var t1;
$('.main_menu ul li').hover(function() {
    clearTimeout(t1);
    var self = this;
    setTimeout(function() {
        $(self).children('.sub_menu_main').addClass('opened');
    }, 200);
}, function() {
    t1 = setTimeout(function() {
        $('.main_menu ul li').children('.sub_menu_main').removeClass('opened');
    }, 200);
});
于 2013-01-16T15:46:06.760 に答える
0

表示がopenクラスに適用される場合、それはコードが行うことです。http://jsfiddle.net/7GWKX/をご覧ください。たぶん、あなたのコンセプトの何かが台無しになっています。

それはあなたが望むものですか: http://jsfiddle.net/7GWKX/15/

$('.main_menu ul li').hover(function (e) {
    var self = this,
        time = (e.type ==='mouseleave') ? 1000 : 200;
    var t = setTimeout(function () {
        hoverCallback(self);
    }, time);
});

function hoverCallback(parentNode) {
    $('.sub_menu_main',parentNode).toggleClass('opened');
};
于 2013-01-16T16:52:37.117 に答える