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

Answer 1

您的问题是由于您在页面加载时附加了悬停事件处理程序。元素类中的更改对任何已绑定(bind)的事件处理程序没有影响。要执行您需要的操作，必须使用委托(delegate)事件处理程序，如下所示:

$(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 类简​​单地切换行为来简化类切换逻辑存在。