jquery - 在 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