Question

我正在使用wordpress动态创建导航栏，并使用jquery将子菜单附加到导航栏。使用jquery，当你将鼠标悬停在第二个菜单项上时，子菜单会向下动画并淡入。我在这里创建了一个jsfiddle：http://jsfiddle.net/NWpBB/

它有效但不太好。如果将鼠标悬停在子菜单中的右上方列表项上，它将消失。它似乎有点毛病。考虑到上面的js小提琴链接上的jquery，我怎么能改进这种悬停效果的功能呢？

这是jquery：

$("#menu-nav li:nth-child(2) a").append('<span id="dropdown"></span');

$(".hoverMenu").css({"opacity":"0"});
        $(".hoverMenu").appendTo("#menu-nav li:nth-child(2)");

        $("#menu-nav li:nth-child(2)").hover(function(){
            $(".hoverMenu").stop().animate({
                top: '38',
                opacity: '1'
            }, 500);
        }, function(){
            $(".hoverMenu").stop().animate({
                top: '-290',
                opacity: '0'
            }, 500);
        });

Answer 1

问题解决了：http://jsfiddle.net/NWpBB/1/

您只想访问#menu-nav的直接“li”子项，因此添加了“＆gt;”介于两者之间。

你还有一个小问题：当你将鼠标悬停在0-opacity子菜单上时，它会开始出现，因为它是由jQuery告知的。你应该让它显示：无，不仅隐藏。

编辑：最后一个解决了http://jsfiddle.net/NWpBB/4/

jquery悬停效果，子菜单消失

1 个答案: