.hover上的jQuery slideDown菜单在第二次hover之前不起作用

以下代码成功运行，但菜单slideDown仅适用于我的菜单项上的第二个鼠标hover。 它第一次出现，就像第一次没有应用jQuery一样。

$(document).ready( function() { // animate dropdown menus $('#wp-admin-bar ul li').hover( function () { //show submenu $('ul', this).slideDown(180); }, function () { //hide submenu $('ul', this).slideUp(180); } ); }); 

奇怪的是，如果我补充一下

 $(this).addClass("hover"); 

该类将立即添加 – 在第一个hover时。

我对此感到有些困惑。

Answer 1

好的地方： $(this).addClass("hover"); 等式？ 因为听起来就像是第一个mouseIn通过CSS显示div然后从jQuery代码开始就可以了。 除非使用元素的style属性设置display否则隐藏和显示的动画不起作用。

Answer 2

我也无法在谷歌上找到任何关于这个问题的东西，我认为这很常见，我想很多人都在使用显示或可见性更改下拉列表而不是优越的左/右偏离（兼容性明智）。

无论如何这里是一个更优雅的解决方案，这将导致所有子菜单也是第一次工作。 无需更改任何现有代码（例如添加display：block）。

 $("#nav li").hover( function() { $("ul", this).slideUp(0).slideDown(180); }, function() { $("ul", this).slideUp(180); } 

）;

这是说什么： – 选择所有li元素 – 在hover时，快速滑动任何子ul元素，然后以人类动画速度向下滑动 – 在鼠标输出上以人类动画速度滑行