jQuery slideDown 菜单在第二次悬停之前不起作用

Question

我有什么：

我有一个基本的下拉列表，我使用 jQuery 在悬停时滑动和向下滑动。

我需要什么：

我需要下拉菜单在第一次悬停和之后的每次悬停时滑动。目前，第一次悬停总是被忽略。 slideDown 直到第二次悬停才会生效。

示例：

https://jsfiddle.net/tbc3rkk3/2/

请注意：

1. 此示例中没有出现问题，但代码应该提供必要的上下文。
2. 我无法链接到我正在开发的网站的实时版本。

我尝试过的：

已经存在a very similar question on StackOverflow。

选定的答案表明，我通过 CSS 将 ul 设置为 display:none;，但这已经在我的案例中应用了。

我的问题：

为什么第一个 hover/slideDown 被挡住了？

Answer 1

为什么不使用slideToggle？

$("#language").on('click', function () {
    $(".language_dropdown").slideToggle("slow");
});

See my JSFiddle.

注意：不建议在悬停时执行该功能，因为它会更频繁地触发，并且无法正确处理手机和平板电脑上的用户。点击是更好的方法。请参阅我更新的 JSFiddle。

Answer 2

您必须删除这部分才能使动画正常工作：

#language:hover .language_dropdown {
    display: block;
}

See this fiddle

注意：您还可以添加stop()函数来防止多次悬停无用动画。

$("#language").hover(function () {
    $(".language_dropdown").stop().slideDown("slow");
}, function() {
    $(".language_dropdown").stop().slideUp("slow");
});