Hover()事件处理程序不尊重动态更改的类

Question

这是我的代码：

<li class="dropdown">
    ...
</li>

$(window).scroll(function() {
    if ($(".navbar").offset().top > 70) {
        $(".dropdown").addClass("dropdown-collapse").removeClass("dropdown");
    } else {
        $(".dropdown-collapse").addClass("dropdown").removeClass("dropdown-collapse");
    }
});
$(".dropdown-collapse").hover(
    function() { $(this).addClass('open') },
    function() { $(this).removeClass('open') }
);

首次加载页面时，<li>的类仍在下拉列表，当页面滚动bellow 70px时，类替换为下拉折叠。问题是，当类下拉列表替换为下拉级课时，我的悬停功能无效。请帮助我，谢谢。

Answer 1

您的问题是由于您在页面负载上附加了悬停事件处理程序的事实。元素上类的变化对任何已经绑定的事件处理程序没有影响。要做您需要使用委派事件处理程序的工作，例如：

$(window).scroll(function() {
    var offsetTop = $(".navbar").offset().top;
    $(".dropdown, .dropdown-collapse")
        .toggleClass("dropdown-collapse", offsetTop > 70)
        .toggleClass("dropdown", offsetTop <= 70)
});
$(document).on('mouseenter', '.dropdown-collapse', function() {    
    $(this).addClass('open');
}).on('mouseleave', '.dropdown-collapse', function() {
    $(this).removeClass('open');
});

请注意，您可以永久将.dropdown类在元素上放在元素上，然后简单地切换行为是否存在.dropdown-collapse类。