在 jQuery 中重新创建 CSS 伪类

Question

我正在尝试使用 jQuery 向我的导航栏添加一个小动画。现在我有导航栏的子菜单从 display:none 更改为 display:block 与 css :hover 伪类。正如我所说，我正在尝试使用 jQuery 来执行此操作，因此我需要创建一个类似于我在 css 中使用的选择器。我使用的选择器只会显示它的子列表：

#nav ul li:hover > ul

这很好用，但是我显然不能在 jQuery 选择器中使用 :hover 伪类，我尝试使用 .hover() 方法这样（这还没有任何动画）：

 $('#nav ul li').hover(function() {
 $('#nav ul li').children('ul').css('display','block');
 }, function() {
 $('#nav ul li').children('ul').css('display','none');
 });

但是，如果我将鼠标悬停在 任何 列表项上，则会显示所有子菜单。以下是几个 jsfiddle 示例：

css 的样子（以及我想用 jQuery 重新创建的内容）：http://jsfiddle.net/FHdLC/

上面 jQuery 代码的结果：http://jsfiddle.net/LBK3T/

非常感谢您提供的任何帮助！

Answer 1

使用this 来引用.hover() 处理程序中的当前元素，如下所示：

$('#nav ul li').hover(function() {
   $(this).children('ul').css('display','block');
}, function() {
   $(this).children('ul').css('display','none');
});

Here's your example working with the code above :)

此外，您还可以使用 .toggle() 进一步缩短它，如下所示：

$('#nav ul li').hover(function() {
   $(this).children('ul').toggle();
});​

You can test the .toggle() version here