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> 的类仍然是下拉列表，当页面滚动到 70 像素以下时，该类替换为下拉折叠。问题是当类下拉列表替换为下拉类时，我的悬停功能不起作用。请大家帮帮我，谢谢。

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 类是否存在来切换行为来简化类切换逻辑。