2

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

我有一个看起来像这样的菜单——不是我选择的格式，它是从 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”项目并将它们向上滑动。

你可以在这里看到一个带有 DIV 的示例（我从这里偷了这个想法）：

示例链接

但是为了让它与嵌套的 div 一起工作而付出了巨大的努力。

有人可以建议我需要做什么并解释一下，以便我能理解我做错了什么吗？

干杯，

马特

4

4 回答 4

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项目彼此不是兄弟姐妹。

于 2012-11-13T17:34:14.753 回答
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);
});

否则，如果您不滚动到另一个菜单元素，比如说下面的内容，您的向上滑动可能不会被正确调用。

例子

​</p>

于 2012-11-13T17:42:01.127 回答
0

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

$(this).children('.menu_body').slideDown(500).delay(500).siblings(".menu_body").slideUp("slow");
于 2012-11-13T17:36:12.910 回答
0

马特，尝试使用延迟。

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

$.when($('div').animate({"opacity": "0"}, 1000)).done(function(){
    // divs hidden, run code to show them
    $('div').animate({"opacity": "100"}, 1000)
});
于 2012-11-14T12:49:03.253 回答