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

简单的jQuery悬停菜单

2 个答案: