懸停（）事件處理不尊重動態改變類

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像素的class替換爲dropdown-collapse。問題是我的懸停功能在下拉班替換班級下拉時不起作用。請幫助我們，謝謝。

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類存在。