Question

这是我的fiddle我很难在jquery的帮助下创建一个下拉菜单。

$("a#SHOP").hover(function () {
            $("ul#test").fadeIn();
        }, function () {
            window.setTimeout(function () {
                $("ul#test").fadeOut();
            }, 500);
        });

我在寻找悬停时应该可见的子菜单吗？

Answer 1

当您离开#SHOP元素以悬停#test元素时，会触发淡出。一种解决方案是将触发器添加到#SHOP0元素，该元素是子菜单的父元素：

http://jsfiddle.net/bb3R2/

$("#SHOP0").hover(function () {
    $("#test").fadeIn();
}, function () {
    window.setTimeout(function () {
        $("#test").fadeOut();
    }, 500);
});

Answer 2

如果你喜欢这样做，可能是这样的：

$(".top-level li").hover(function () {
    $("ul#test", this).fadeIn();
}, function () {
    $("ul#test", this).delay(500).fadeOut();
});

Fiddle

在我看来，你想要显示你的子菜单，如果他们有孩子的话，这也适用于其他的元素，并且在淡出时你需要半秒延迟，这样你就可以使用.delay(500)我在答案中建议的方式。

Answer 3

你最好使用slideUp（）/ slideDown（），你的超时是无用的：

$("#SHOP0").hover(function () {
    $("ul#test").slideDown();
}, function () {
    $("ul#test").stop().slideUp();
});

演示：http://jsfiddle.net/Akaryatrh/LLe77/1/

[编辑]添加了停止（）以避免多个动画链接。

创建jquery下拉菜单

3 个答案:

Fiddle