需要帮助构建jQuery下拉菜单吗

我只是从jQuery开始。我想做一个简单的“ul”下拉菜单来提高我的理解力。基本流程如下：

“ul.menu li ul”具有显示：无>>在li悬停时，获取并存储“this”ul的高度>>将“this”ul的高度设置为0>>将显示设置为块>>将高度设置为原始存储高度

我知道已经有一些很好的下拉列表插件，但我真的很想用自己的插件来更好地理解jQuery

到目前为止，我已经完成了以下非常糟糕的工作（请参见此处的live版本-）：

---

---

我想知道如何使用存储的原始高度来代替100%

第二，我相信这些都可以浓缩成几行，但我还不知道怎么做

非常感谢任何帮助

更新： 好的，我就快到了。我使用了Marve发布的代码作为基础，并在其他方面进行了工作。唯一不起作用的是，我需要在一切结束时将隐藏的UL的高度重置为其原始高度，并将其显示设置为“无”，以便再次悬停。你知道为什么它不起作用吗

---

---

---

这里有一个简单的css提示可以帮助您：

使用$（'ul.menu>li'）而不仅仅是$（'ul.menu-li'）

---

这将使鼠标悬停仅指向您正在悬停的列表项下的菜单。

以下是一个简单的css提示：

使用$（'ul.menu>li'）而不仅仅是$（'ul.menu-li'）

---

这将使鼠标悬停仅针对您正在悬停的列表项下的菜单。

您正在学习jQuery并使用此问题来完成这项工作，这非常好。真是太好了

我认为你对这个问题的解决方案设计过度了。请看两个内置jQuery函数，它们有助于减少解决方案中的一些工作量：和。毫无疑问，您将在中找到更多有用的函数。这段代码完成了您已经发布的大部分内容：

$j(document).ready(function() {
    $j('ul.menu > li').hover(
        function() { $j(this).children('ul').stop(true, true).slideDown(); },
        function() { $j(this).children('ul').stop(true, true).slideUp(); }
    );
});

该代码段不会处理HTML示例中的子菜单，但考虑到您的学习愿望，实现它应该不会太费力

---

另请参阅上的文档。

您正在学习jQuery并使用这个问题来完成它，这很好。真是太好了

我认为你对这个问题的解决方案设计过度了。请看两个内置jQuery函数，它们有助于减少解决方案中的一些工作量：和。毫无疑问，您将在中找到更多有用的函数。这段代码完成了您已经发布的大部分内容：

$j(document).ready(function() {
    $j('ul.menu > li').hover(
        function() { $j(this).children('ul').stop(true, true).slideDown(); },
        function() { $j(this).children('ul').stop(true, true).slideUp(); }
    );
});

该代码段不会处理HTML示例中的子菜单，但考虑到您的学习愿望，实现它应该不会太费力

---

另请参阅上的文档。

谢谢，我实际上是从这些文档开始的，但问题是您不能对它们使用停止功能，因此如果您进行多次滚动，您会遇到问题，因为菜单会计算每个滚动并执行它。所以我决定走这条路线，这样我就可以使用动画了。此外，我还计划让更多的子菜单水平展开，因此我需要再次使用动画。同意您可能必须为子菜单使用

.animate

，但我不确定为什么使用幻灯片功能至少在顶层不起作用。注意：我为我的代码片段修改了悬停函数中的选择器，以确保只有一个直系子菜单将被设置动画。这与这里提到的有点类似——如果你反复滚动菜单，然后移开，它将继续启动。啊，解决方案在于传递给

。stop

。查看我答案中的更新片段。太好了，我不知道你可以传递参数来停止，所以这是一件非常有用的事情，干杯。尽管如此，我仍然想知道如何对我的原始想法进行排序，因为我想将其用作我所有菜单的框架，因此可能更喜欢以其他方式查看隐藏的UL，因此让它动画化将是一个很大的帮助，因为我可以简单地更改不同效果的动画参数。我想我的主要任务是学习如何获取、存储和调用某些东西以供以后使用，例如我在原始代码中提到的隐藏UL高度。谢谢，我实际上是从这些东西开始的，但问题是你不能对它们使用停止功能，所以如果你进行多次翻滚，你会遇到问题，因为菜单将对每一个进行计数并执行它。所以我决定走这条路线，这样我就可以使用动画了。此外，我还计划让更多的子菜单水平展开，因此我需要再次使用动画。同意您可能必须为子菜单使用

.animate

，但我不确定为什么使用幻灯片功能至少在顶层不起作用。注意：我为我的代码片段修改了悬停函数中的选择器，以确保只有一个直系子菜单将被设置动画。这与这里提到的有点类似——如果你反复滚动菜单，然后移开，它将继续启动。啊，解决方案在于传递给

。stop

。查看我答案中的更新片段。太好了，我不知道你可以传递参数来停止，所以这是一件非常有用的事情，干杯。尽管如此，我仍然想知道如何对我的原始想法进行排序，因为我想将其用作我所有菜单的框架，因此可能更喜欢以其他方式查看隐藏的UL，因此让它动画化将是一个很大的帮助，因为我可以简单地更改不同效果的动画参数。我想我的主要任务是学习如何获取、存储并调用它以供以后使用，比如我在原始代码中提到的隐藏UL高度。

$j(document).ready(function() {
    $j('ul.menu > li').hover(
        function() { $j(this).children('ul').stop(true, true).slideDown(); },
        function() { $j(this).children('ul').stop(true, true).slideUp(); }
    );
});