jQuery .hover（）与else if语句

Question

我想在下拉菜单中为一组子项的onmouseout事件添加一些延迟。 但是我不想使用CSS过渡。 我使用.hover（）和setTimeout方法进行设置，但我只想将其用于菜单中的特定元素-在这种情况下，仅用于子项，因此我为它们使用了else语句。 我不知道为什么这个if else语句不起作用。

这是我的JavaScript代码：

var selectors =
    {
        element: '.main-menu li:has(ul)'
    }

var opacityWorkaround = function ($element, value) {

        $element.css('opacity', value);
};

var getAnimationValues = function (visible) {
    var result = {
        visibility: visible
    };
        result.opacity = visible === 'visible' ? 1 : 0;
};

var mouseActionHandler = function ($element, visible, opacityValue) {
    $element
        .stop()
        .css("visibility", 'visible')
        .animate(getAnimationValues(visible),
        3000,
        function () {
                $(this).css("visibility", visible);
                opacityWorkaround($(this), opacityValue);
               });
};

var onMouseIn = function () {
    var $submenu = $(this).children("ul:first");
    if ($submenu) {
        mouseActionHandler($submenu, 'visible', 1);
    }
};

var onMouseOut = function () {

    var $submenu = $(this).children("ul:first");
    var $global = $('.global').children('ul');

    if ($submenu) {

               mouseActionHandler($submenu, 'hidden', 0);

    } else if ($global) {
        setTimeout(function() {
            mouseActionHandler($global, 'hidden', 0);
        },1500);
    }
};

$(selectors.element).hover(onMouseIn, onMouseOut);

我设置了1500ms的延迟，并且$ global变量引用了我想使该延迟消失的菜单子项。 当用户将鼠标光标从“某些项目>”选项卡中移出时，我想实现这一目标。

这是我的小提琴例子。 http://jsfiddle.net/PNz9F/1/

在此先感谢您的帮助！

Answer 1

在示例中，您的问题$submenu始终具有一个值，因此永远不会运行else if语句。 您可以改为检查课程。

        var timeout; 
        var $submenu = $(this).children("ul:first");
        var $global = $('.global').children('ul');

        if ($(this).hasClass('menu-item')) {

                   mouseActionHandler($submenu, 'hidden', 0);
                   mouseActionHandler($global, 'hidden', 0);
                   clearTimeout(timeout);

        } else if ($(this).hasClass('global')) {
            timeout = setTimeout(function() {
                mouseActionHandler($global, 'hidden', 0);
            },1500);
        }

Answer 2

您应该可以只在代码中使用:hover选择器来检查用户是否将:hover悬停在元素上并相应地运行代码