簡單的jQuery懸停菜單

Question

這看起來確實有些力不從心，可以把它改寫任何更好/更緊湊：

$("#cart-summary").hover(
     function() { 
     $('.flycart').slideDown('fast'); 
     } 
    ); 
    $(".flycart").hover(
     function() {}, // mousein function not required 
     function() { // hide menu on mouseout 
     $('.flycart').slideUp('fast'); 
     } 
    ); 
    $('.flycart a.close').click(function(){ 
     $(this).parents('.flycart').hide(); 
    }); 

謝謝！

Answer 1

$("#cart-summary").mouseenter(function() { 
    $('.flycart').slideDown('fast'); 
}); 

$(".flycart") 
    .mouseleave(function() { 
     $(this).slideUp('fast'); 
    }) 
    .find('a.close') 
     .click(function(){ 
      $(this).parents('.flycart').hide(); 
     }); 

雖然這是一個小改進。我無法猜測#cart-summary和.flycart之間的關係。

Answer 2

總之，沒有。但是，您可以不使用空懸停功能：只需使用 mouseenter()和mouseleave()。 mouseover和mouseout與mouseenter和mouseleave有細微的差異。查看jQuery API獲取更多信息。

$("#cart-summary").mouseenter(function() 
{ 
    $('.flycart').slideDown('fast'); 
}); 

$(".flycart").mouseleave(function() 
{ 
    $(this).slideUp('fast'); 
}); 

$('.flycart a.close').click(function() 
{ 
    $(this).parents('.flycart').hide(); 
});