1

メニューで onmouseout/over delay に問題があります。setTimeout の数値を 100 から 2000 に変更すると、最上位のメニューが非表示から遅延しますが、サブレベルのメニューは遅延しません。新しい onmouseover では、まだ非表示になっています。

プライマリ メニューまたはプライマリ メニューとセカンダリ メニューのいずれかの onmouseout で、非表示を 2 ～ 3 秒遅らせますが、ユーザーが onmouseover のいずれかの要素で戻ると、遅延がキャンセルされ、それらが表示され続けます。

私がオンラインで見つけたほとんどのヘルプは、遅延を非表示にするためのものですが、新しい onmouseover でキャンセルするものではありません。

ここに私のコードがあります: http://jsfiddle.net/MQ2cg/4/

jQuery.fn.hoverWithDelay = function (inCallback, outCallback, delay) {
    this.each(function (i, el) {
        var timer;
        $(this).hover(function () {
            timer = setTimeout(function () {
                timer = null;
                inCallback.call(el);
            }, delay);
        }, function () {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            } else outCallback.call(el);
        });
    });
};
$(document).ready(function () {
    var hovering = {
        mainMenu: false,
        categories: false
    };

    function closeSubMenus() {
        $('ul.sub-level').css('display', 'none');
    }
    closeSubMenus();

    function closeMenuIfOut() {
        setTimeout(function () {
            if (!hovering.mainMenu && !hovering.categories) {
                $('#navigation').fadeOut('fast', closeSubMenus);
            }
        }, 100);
    }
    $('ul.top-level li').hover(function () {
        $(this).find('ul').show();
    }, function () {
        $(this).find('ul').hide();
        closeMenuIfOut();
    }, 100);
    $('#categories').hoverWithDelay(function () {
        $('#navigation').show();
        hovering.categories = true;
    },

    function () {
        hovering.categories = false;
        closeMenuIfOut();
    }, 175);
    $('#navigation').hover(function () {
        hovering.mainMenu = true;
    }, function () {
        hovering.mainMenu = false;
    });
    $('#categories').click(function () {
        window.location.href = $('a', this).attr('href');
    });
});

手伝ってくれてありがとう。

4

1 に答える 1

0

この質問は似ているようです：

マウスオーバー画像アップロード ボタンの JS (Facebook など)

Amin Eshaqが指摘したように、mouseenter / mouseleaveを使用してください

ここに作業コードがあります:

    $(this).bind({
            'mouseenter' : function () {
                    timer = setTimeout(function () {
                            timer = null;
                            inCallback.call(el);
                    }, delay);
            },
            'mouseleave' : function () {
                    if (timer) {
                            clearTimeout(timer);
                            timer = null;
                    } else outCallback.call(el);
            }            
    });
于 2012-07-20T23:42:06.883 に答える