javascript - jQuery基于mouseenter/leave的slideToggle菜单

Question

我基本上已经有了一个小菜单系统，但有一些我无法弄清楚的怪癖。对于同样的问题，我似乎找不到任何问题。

功能示例位于 http://louisnk.com/photography - 唯一包含几乎所有代码的菜单是“美国”。

点击后，菜单显示，我希望它:

• A) 延迟，如果 mouseenter 事件从未触发，则向上滑动

  B) 如果 mouseenter 事件触发，则不会向上滑动

  C) 延迟，然后在鼠标离开时向上滑动

我已经把它记下来了，除了我相信我有一些事件委托(delegate)问题......

我第一次点击时，一切都很好。我第二次单击任何菜单时，似乎“poked”(根据开关情况设置为 true/false 的变量)被设置为 false，因此会自动导致“noPoke”功能关闭菜单无论 mouseenter 事件如何。后续点击显然会导致陌生人行为。

我将以下代码全部封装在文档就绪函数中:

var menuSwitch = function(menu) {
    $(menu).on('mouseenter mouseleave', function(e) {

        switch(e.type) {

            case 'mouseenter':
                poked = true;
                console.log('probed');
                return false;
                break;

            case 'mouseleave':

                $(this).delay(1500).slideUp(500,function() {
                    $(menu + 'li').hide();
                    console.log('switched');
                });                 
                poked = false;
                break;

            default:
                poked = false;
                console.log('defaulting');
                break;
        }
    });
}

var noPoke = function(menu) {
    if (poked == false) {
        $(menu).delay(2000).slideUp(500,function() {
            $(menu + 'ul').hide();
            console.log('no pokes given');
        });
        poked = true;
    }
}

var poked = false;

$('.usa').click(function(e) {
    e.preventDefault();

    poked = false;      

    $('.usaMenu').slideToggle(500);

    menuSwitch('.usaMenu');

    console.log(poked);

 $('.usaMenu li').on('mouseenter', function() {
        if ($(this).children() != false) {
            $(this).children().fadeTo(200,1);
        }
        else {
            $('.usaMenu li>ul').fadeTo(200,0).hide();
        }
    });

    noPoke('.usaMenu');

});

Answer 1

因此，在又花了 6 个小时研究和尝试不同的事情之后，我最终得到了以下结果，解决了我遇到的问题。

希望这对将来尝试这样做的人有用。

var menuSwitch = function(menu) {

    if ($(menu).is(':hover') === false) {
        var hideMe = setTimeout(function() {
            $(menu).slideToggle(500);
        },4000);
    }

    $(menu).on('mouseenter mouseleave', function(e) {

        switch(e.type) {

            case 'mouseenter':

                console.log('probed');
                clearTimeout(hideMe);
                $(this).stop();
                $(this).slideDown(200);
                break;

            case 'mouseleave':

                $(this).delay(2000).slideUp(500,function() {
                    $('li>ul',menu).hide();
                    console.log('switched');
                });                 
                break;
        }
    });
}


var babies = function(menu) {
    $('li',menu).unbind('mouseenter mouseleave click');

    $('li',menu).each(function() {
        if ($('li',menu).children() != false) {

            $(this).on('click',function(e) {
                e.preventDefault();
                $(this).children('ul').slideToggle(300);                    
            });
        }
    });

}


var menuCtrl = function(menu) {
    $(menu).slideToggle(500);

    $(menu).unbind('mouseenter mouseleave');

    menuSwitch(menu);

    babies(menu);
}


$('.usa').click(function(e) {
    e.preventDefault(); 

    menuCtrl('.usaMenu');

});

最终证明，由于初始单击处理程序每​​次触发时都会运行这些函数，因此它会创建 mouseenter/leave 事件处理程序的重复项，从而导致各种问题。如果鼠标从未进入，我还试图以错误的方式关闭菜单。

为了解决最令人讨厌的问题(重复的事件处理程序)，我简单地使用了 unbind() api，在函数开始时将要取消绑定(bind)的事件传递给它，这样当它们重新绑定(bind)时，只有一个实例。这可能不是最有效的方法，但它确实有效。

为了解决没有 mouseenter 时的计时/隐藏问题，我使用了 setTimeout 函数，如果 mouseenter 了则清除该函数。