在jQuery中重新创建CSS伪类

我正在尝试使用jQuery向我的导航栏添加一点动画。现在，我使用css:hover伪类将导航栏的子菜单从display:none更改为display:block。正如我所说的，我正试图用jQuery实现这一点，因此我需要创建一个与我在css中使用的选择器类似的选择器。我使用的仅显示其子列表的选择器是：

#nav ul li:hover > ul

这非常有效，但是我显然不能在jQuery选择器中使用：hover伪类，我尝试过这样使用.hover（）方法（目前还没有任何动画）：

但是，如果我将鼠标悬停在任何列表项上，将显示所有子菜单。下面是几个JSFIDLE示例：

css的外观（以及我想用jQuery重新创建的内容）：

上面jQuery代码的结果是：

---

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

使用

this

引用处理程序中的当前元素，如下所示：

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

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

：）

此外，您还可以使用以下方法进一步缩短它：

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

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

---

谢谢你，尼克，你似乎总是回答我所有的jQuery问题，而且这些问题总是很好的答案。非常感谢，我会尽快将此标记为正确答案。这比预期的效果更好！我使用了切换方法，但将其更改为“slideToggle（）”，并非常轻松地实现了动画效果！再次感谢@Ben-Welcome:）如果您在快速悬停时遇到动画队列问题（累积），请在

.sligetogle（）之前添加一个
.stop（true，true）
）