简单的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(); 
});