在 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 引用 < 中的当前元素 code>.hover() 处理程序，如下所示：

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

这是您使用上面的代码 :)

此外，您还可以使用 .toggle( )，如下所示：

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

您可以测试 .toggle()< /code> 版本在这里