Question

我在菜单中遇到onmouseout / over延迟问题。我发现通过将setTimeout数字从100更改为2000，它将顶层菜单从hide而不是子级别菜单延迟，并且在新的onmouseover上它们仍然隐藏，这是我正在努力实现的目标：

在主菜单或主菜单和辅助菜单的onmouseout上，延迟隐藏2-3秒但是如果用户返回onmouseover任何一个元素，它将取消延迟并继续显示它们。

我在网上找到的大多数帮助只是为了隐藏延迟，但不会在新的onmouseover上取消它。

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');
    });
});

感谢您的帮助。

Answer 1

这个问题似乎很相似：

JS for mouseover image upload button (like 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);
            }            
    });

顶级/子级菜单上的hide（）延迟问题但是当鼠标再次进入时取消hide（）

1 个答案: