javascript - jQuery .not() 无法正常工作

Question

我环顾四周并研究了为什么这不起作用，但我似乎处于一种不同的情况。

我有一个导航项的默认操作，用于处理悬停时的导航动画:

$('.logoCont').hover(function(){
    someFunction()...
}, function (){
    someFunctionReverse()...
});

现在，当谈到在移动屏幕上时，我会隐藏导航并在那里放置一个按钮。然后按钮控制菜单从侧面滑出的动画。我添加了一行代码，用于在单击此按钮时向导航元素添加一个类。

$('.mobile-menuButton').click(function(){ //When you click the menu-show button
    if($(this).hasClass('menuClosed')){ //Check to see if the menu is closed
        $('.nav_hover').addClass('mobile_open'); //Add the mobile_open class to the navigation items
    } else {
        $('.nav_hover').removeClass('mobile_open'); //remove it
    }
});

然后我将第一个悬停函数更改为:

$('.nav_hover').not('.mobile_open').hover(function(){
    someFunction()...
}, function (){
    someFunctionReverse()...
});

我希望这会阻止 someFunction() 在移动菜单出现时发生。

你可以查看我在做什么HERE - 当您将屏幕缩小到 540px 以下时，媒体查询将生效，您可以单击菜单按钮。

关于 .not() 的文档 HERE .本页末尾的第二个示例正是我所希望的。

Answer 1

该类稍后添加，事件处理程序附加到在页面加载时(或每当执行时)与选择器匹配的任何和所有元素，并不真正关心您稍后添加的内容。
您必须检查事件处理程序中的类

$('.nav_hover').hover(function(){
    if ( !$(this).hasClass('mobile_open') ) {
        someFunction()...
    }
}, function (){
    if ( !$(this).hasClass('mobile_open') ) {
        someFunctionReverse()...
    }
});

委托(delegate)也可以工作，但它不会真正与 not() 或 hover()

一起工作

$(document).on({
    mouseenter: function() {
        someFunction()...
    },
    mouseleave: function() {
        someFunctionReverse()...
    }
}, '.nav_hover:not(.mobile_open)');