Question

我正在尝试使用jQuery添加一个小动画到我的导航栏。现在我将导航栏的子菜单从display：none更改为display：block with css：hover pseudo-class。正如我所说，我试图用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

在jQuery中重新创建CSS伪类

1 个答案: