jquery - 在jQuery中重新创建CSS伪类

我正在尝试将jQuery动画添加到我的导航栏中。现在，我使用css：hover伪类将导航栏的子菜单从display：none更改为display：block。就像我说的那样，我正在尝试使用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/

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

最佳答案

使用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

关于jquery - 在jQuery中重新创建CSS伪类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3160034/