Question

所以我想在我的下拉菜单上做一个不错的小效果，但我不知道使用悬停和slideDown功能的正确方法

$('nav > div > ul > li').hover(function() {
    $('nav > div > ul > li > ul').stop(true, true).slideDown(200);
}, function() {
    $('nav > div > ul > li > ul').stop(true, true).slideUp(200);

});

这就是我现在拥有的，这不起作用它显示我的子菜单，不管我在徘徊的是什么，我希望它能够工作，因此它在元素上，只有具有子菜单的元素。

编辑：FIDDLE

Answer 1

试试这个小提琴

http://jsfiddle.net/MzJNT/2/

我建议为下面的选择器添加一些ID

JS $（document）.ready（function（）{

$('#parent').hover(function() {
    $('#submenu').stop(true, true).slideDown(200);
}, function() {
    $('#submenu').stop(true, true).slideUp(200);

});

 });

我相信有更好的方法可以做到这一点，但这是一个良好的开端。

编辑

我认为我找到了实际的问题，为什么它不像你想要的那样滑动，你有一个风格让它显示而不是使用JS让它出现

删除此...

     nav > div > ul > li:hover > ul {
     display: block;
     }

或试试这个小提琴http://jsfiddle.net/MzJNT/9/

Answer 2

您只需向应该下拉的<li>添加ID。

<强> HTML ：

<li id="dropdown"><a href="#">Parent</a>

<强>的jQuery ：

$('nav > div > ul > li#dropdown').hover(function() {

小提琴： Fiddle

此外，您可以在元素中检查<ul>：

<强>的jQuery ：

$( document ).ready(function() {
    $('nav > div > ul > li').hover(function() {
        if (this.has('ul')) {
            $('nav > div > ul > li > ul').stop(true, true).slideDown(200);
        }
    }, function() {
        if (this.has('ul')) {
            $('nav > div > ul > li > ul').stop(true, true).slideUp(200);
        }
    });
});

小提琴： Fiddle

然后，如果您想要真正具体，可以在其中检查<li>。

slideDown下拉菜单

2 个答案: