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

【问题标题】：jQuery hover menu on embedded list items嵌入列表项上的 jQuery 悬停菜单
【发布时间】：2012-11-13 17:30:20
【问题描述】：

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

我有一个看起来像这样的菜单 - 不是我选择的格式，它是从 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 的例子（我从这里偷了这个想法）：

Example link

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

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

干杯，

马特

【问题讨论】：

标签： jquery

【解决方案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 项目不是彼此的兄弟。

【讨论】：

试过这个。这是非常片状的。不知道为什么，但菜单会中途停止打开，然后拒绝打开，除非页面被刷新和其他奇怪的东西。

【解决方案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);
});

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

Example

【讨论】：

bad ：如果您以一种奇怪的方式将鼠标悬停在标题 3 上，假设您在标题 2 内，将鼠标悬停在标题 3 上并在标题 2 完全折叠之前返回到标题 2 的子项，您会得到 aa循环行为。可能性很小，但我实际上是偶然发现的。
应该只需要添加一个 stop()，这似乎可以解决问题。当时没想到，很好。
添加站点在哪里？我已经实现了这个，它似乎工作得很好，但我想我一直在捕捉到提到的行为。同样在滚动几卷之后，整个事情似乎都被锁定了:(
我更新了示例以包含 stop()，它在 mouseLeave 函数中。我的例子似乎很好，在列表中包含 slideUp / Down 有时本质上会出现问题。希望这对您仍然有用。我不确定您是否希望导航保持打开状态，如果这就是意图，那么我认为其他建议之一可能是您之后的建议
对了。这是在一个实际的网站上，并且-正如您将看到的那样，如果您使用它-它似乎只是在几次传球后就被占用了。我发现 JQuery 非常令人沮丧。 development.newbridge.bathnes.sch.uk

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

马特，尝试使用延迟。

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

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

【讨论】：