Question

我想在下拉菜单中为一组子项暂停onmouseout事件。但我不想使用css过渡。我用.hover（）和setTimeout方法设置它但我只想把它放在菜单中的特定元素 - 在这种情况下仅用于子项，所以我使用if 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变量指的是菜单中的子项，我想要消除这种延迟。当用户将鼠标光标移出“某些项目＆gt;”时，我想实现此目的标签

这是我的小提琴示例。 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选择器来检查用户是否悬停在元素上并相应地运行代码

jquery .hover（）with else if语句

2 个答案: