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

稍后会添加该类，并且事件处理程序将附加到在pageload（或执行时）与选择器匹配的任何和所有元素，并且不关心您稍后添加的内容。
您必须检查事件处理程序中的类

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

委派也可以工作，但它不适用于not()或hover()

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

jQuery .not（）无法正常工作

1 个答案: