嵌入式列表项上的jQuery悬停菜单

Question

很难理解这一点。为愚蠢道歉。

我有一个看起来像这样的菜单--不是我选择的格式，它是从WordPress自动生成的：

CSS

​.menu_body {
    display: none;   
}​

<ul id="menu-list">
    <li class="menu_head"><a href="#">Header-1</a></li>
    <li class="menu_head"><a href="#">Header-2</a>
    <ul class="menu_body">
        <li><a href="#">Link-1</a></li>
        <li><a href="#">Link-2</a></li>
    </ul>
    </li>
    <li class="menu_head"><a href="#">Header-3</a>
    <ul class="menu_body">
        <li><a href="#">Link-3</a></li>
        <li><a href="#">Link-4</a></li>
    </ul>
    </li>
    <li class="menu_head"><a href="#">Header-4</a></li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

我想要做的是编写一个基于jQuery悬停的函数，该函数悬停在带有类menu_head的项上，显示类"menu_body“中的项。

我从其他地方学到了这样的想法:使用一个函数来打开一个菜单，然后关闭所有其他的菜单，这样做是很整洁的。看起来会是这样的：

$("#menu-list li.menu_head").mouseover(function()
{
 $(this).children('.menu_body').slideDown(500).siblings(".menu_body").slideUp("slow");

});​

这不起作用，但你可以看到我在做什么-得到第一个相关的'menu_body‘项目，并滑下来，然后得到所有其他'menu_body’项目，并滑动他们。

您可以在这里看到一个DIVs的例子(这就是我从这里偷来的)：

示例链接

但要想让它与嵌套的div一起工作，还需要付出巨大的努力。

有人能建议我该做什么，并解释一下，这样我才能理解我做错了什么？

干杯,

哑光

Answer 1

像这样试试- 演示

$("#menu-list li.menu_head").mouseover(function() {
    $(".menu_body").stop().slideUp("slow");
    $(this).children('.menu_body').delay(600).stop().slideDown(500);
});

您的.menu_body项不是彼此的兄弟姐妹。

Answer 2

我建议使用mouseOver和mouseLeave。

$("#menu-list li.menu_head").mouseOver(function() {
    $(this).children('.menu_body').slideDown(500);
});
$("#menu-list li.menu_head").mouseLeave(function() {
    $(this).children('.menu_body').stop().slideUp(500);
});

否则，如果您不滚动到另一个菜单元素，让我们对下面的内容说，您的幻灯片向上可能无法正确调用。

示例

​

Answer 3

在动画之间添加延迟，如下所示：

$(this).children('.menu_body').slideDown(500).delay(500).siblings(".menu_body").slideUp("slow");