Javascript 基于mouseenter/leave的jQuery滑动切换菜单

我基本上有一个小菜单系统在工作，但有一些怪癖我不明白。对于同一个问题，我似乎找不到任何问题

功能示例位于-唯一包含几乎所有代码的菜单是“USA”

单击后，菜单将显示，我希望它：

• A） 延迟，如果mouseenter事件从未触发，则向后滑动
  B） 如果mouseenter事件确实触发，则不会向上滑动
  C） 延迟，然后在鼠标脱落时向上滑动

我写得很好，除了我认为我有一些活动授权的问题

我第一次点击时，一切都很好。第二次单击任何菜单时，似乎“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');

});

---

所以，在花了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');

});

最终的结果是，由于最初的click处理程序在每次启动时都在运行函数，因此它创建了mouseenter/leave事件处理程序的副本，从而导致了各种各样的问题。如果鼠标没有以错误的方式进入，我还试图关闭菜单

为了解决最讨厌的问题（重复的事件处理程序），我只使用unbind（）api，在函数开始时将事件传递给unbind，这样当它们被重新绑定时，只有一个实例。这可能不是最有效的方法，但它是有效的

---

为了解决没有鼠标指针的计时/隐藏问题，我使用了一个setTimeout函数，如果mouseenter-ed，它就会被清除。

这是wong

$（菜单）。on（'hover mouseenter mouseleave'

$（菜单）。on（'mouseenter mouseleave'或

$（菜单）。hover（函数（）{…}）；

。Hover是onmouseenter/onmouseleave的缩写。顺便说一句，我在你的代码中没有看到任何委托事件。谢谢，我更改了它（我按照你之前所说的方式使用它，但不起作用）以删除Hover部分…遗憾的是没有修复它。是否基于单击功能（或任何功能）添加/提供某些功能，不是事件委派？基本上委派是绑定到静态父容器的事件：明白了。我以后一定会使用该页面作为参考。谢谢。