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时，该类将替换为dropdown-collapse。问题是当使用dropdown-class替换类下拉列表时，我的悬停功能不起作用。请帮帮我们，谢谢。

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类是否存在而简单地切换行为。

hover（）事件处理程序不尊重动态更改的类

1 个答案: