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懸停在元素上並相應地運行代碼