鼠标悬停时的jQuery并离开答案

【问题标题】：jQuery on mouseover and leave鼠标悬停时的jQuery并离开
【发布时间】：2014-01-28 15:05:16
【问题描述】：

我有以下 jQuery，当我的菜单中的一个列表项被鼠标悬停时，它会找到 .sub-menu 是否存在和 .slideDown()，离开它会 .slideUp()。

我的问题是 2 个子菜单大约 205px 高，第三个是 54px 高，每隔一段时间，较大的 .sub-menu 中的 1 个只会达到 54px 的高度。

有没有办法改进下面的 jQuery 并修复高度问题？

$("body").on("mouseenter", ".main-menu > ul > li", function(){
    $(this).find('.sub-menu').slideDown();
}).on("mouseleave", ".main-menu > ul > li", function(){
    $(this).find('.sub-menu').stop().slideUp();
});

很遗憾，我无法将任何 html 内容发布到菜单大小。

【问题讨论】：

我使用hover创建了一个小样本，无法重现这个问题：Fiddle

标签： jquery slidedown slideup mouseenter

【解决方案1】：

您了解hover() 的工作原理吗？一种可能的解决方案是：

$("body").hover(function(){ $(this).find('.sub-menu').slideDown(); }, 
function() { $(this).find('.sub-menu').stop().slideUp(); });

【讨论】：

【解决方案2】：

$(".main-menu > ul > li").hover(function () {
        $(this).find('.sub-menu').stop(true,true).slideToggle("slow");
    });

【讨论】：