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

时间:2012-11-13 17:30:21

标签: jquery

努力理解这一点。道歉愚蠢。

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

CSS

​.menu_body {
    display: none;   
}​

HTML

<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的一个例子(这是我偷走了这个想法的地方):

Example link

但是为了让它与嵌套的div一起工作而挣扎得很厉害。

有人可以建议我需要做什么,然后解释一下我能理解我做错了吗?

干杯,

马特

4 个答案:

答案 0 :(得分:1)

尝试这样 - DEMO

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

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

答案 1 :(得分:1)

我建议使用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);
});

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

Example

答案 2 :(得分:0)

在动画之间添加延迟,如下所示:

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

答案 3 :(得分:0)

马特,尝试使用deferreds。

以下内容可能有助于作为起点。

$.when($('div').animate({"opacity": "0"}, 1000)).done(function(){
    // divs hidden, run code to show them
    $('div').animate({"opacity": "100"}, 1000)
});