Question

以下代码成功运行，但菜单slideDown仅适用于我的菜单项上的第二个鼠标悬停。它第一次出现，就像第一次没有应用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");

在第一次悬停时立即添加课程。

我对此感到有些困惑。

Answer 1

好的，$(this).addClass("hover");在哪里？因为它听起来像是第一个mouseIn通过CSS显示div然后从jQuery代码中获得它的确定。除非使用元素的display属性设置style，否则隐藏和显示的动画不起作用。

Answer 2

我也无法在google上找到任何关于此问题的内容我觉得这很常见，我猜很多人都会在下拉列表中使用显示或可见性更改，而不是优越的左/右offseting（兼容性）。< / p>

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

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

）;

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

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

2 个答案: