在jQuery中重新创建CSS伪类

Question

我正在尝试在我的导航栏中添加一些jQuery动画。现在，我将导航栏的子菜单从display：none更改为display：block with css：hover伪类。正如我所说的，我试图用jQuery来做到这一点，所以我需要创建一个类似于我在css中使用的选择器。我用这将只显示它选择的子列表是：

#nav ul li:hover > ul 

而这个完美工作，但我显然不能使用：jQuery选择内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