1

我正在尝试使用 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/

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

4

1 回答 1

2

用于this引用处理程序中的当前元素，.hover()如下所示：

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

这是您使用上面代码的示例:)

此外，您可以使用 just 进一步缩短它.toggle()，如下所示：

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

你可以在.toggle()这里测试版本

于 2010-07-01T17:11:41.003 回答