JQuery的下拉菜单问题

阅读说明书之前，请看看下拉菜单，我的jsfiddleJQuery的下拉菜单问题

创建我有我从一个教程采取了JQuery的下拉菜单:)并且它非常适合像平滑地为下拉功能设置动画效果。问题是当我将鼠标悬停在菜单右侧的向下箭头（现在是红色）时动画（下拉），但这不是我正在寻找的实际上我需要在鼠标悬停菜单时为其下拉动画（我们服务和地点）。我对JQuery做了轻微的更新，但是这并不奏效。我额外添加到Jquery中的是

向具有下拉和评论span功能的特定li添加了一个类（.drop）

//$("ul.subnav").parent().append("<span></span>"); 

    $("ul.topnav li.drop").mouseover(function() { 


<li class="drop"> 
     <a href="#">Our Services</a> 
     <ul class="subnav"> 
      <li><a href="#">Contract</a></li> 
      <li><a href="#">Sketch</a></li> 
      <li><a href="#">Implementation</a></li> 
     </ul> 
</li>

虽然我尽量保持下降的悬停效果下拉菜单中可见，当我们把光标移动到下拉菜单..

但两者功能不工作！

期待您的答复对这个问题

感谢

保罗

来源

2011-11-18 Akhil Paul

你的代码可以浓缩到眼前这个：

$(function() { 
    $("ul.topnav li:has(.subnav)").hover(function() { 
     $("ul.subnav", this).slideDown('fast').show(); 
    }, function() { 
     $("ul.subnav", this).slideUp('slow'); 
    }); 
});

http://jsfiddle.net/bKxXZ/13/

这里是什么改变了：

从选择跨度选择任意李更改.mouseover()选择器有一个subnav。
将您的选择器从$(this).parent()更改为$(this)，因为我们的选择器现在指向的是父项。
删除触发跨度代码，您现在不需要它。
删除触发范围.hover()的代码。
将.mouseover()更改为.hover()，并将其与现有的.hover()结合使用，因为它们都适用于相同的元素。

来源

2011-11-18 18:50:58 gilly3

酷男，代码正在寻找其简洁的形式谢谢！ –

只要改变一个行：

$("ul.topnav li span").mouseover(function() { ...

应该是：

$("ul.topnav li a").mouseover(function() {

请参阅：http://jsfiddle.net/h5S3c/1/

我刚更新了它以将红色/绿色条固定在右侧。

来源

2011-11-18 18:40:26 jli

+1对于敏锐的眼睛 – diEcho

谢谢jli其工作正常。 –

退房这个更新的提琴：http://jsfiddle.net/ecy7Q/

我基本上改变了

$("ul.topnav li span").mouseover

到

$("ul.topnav li").mouseover

并从随后的代码.parent（）。

来源

2011-11-18 18:43:00

谢谢Jose你的回答帮了我.. –

没问题，anytie。 –

JQuery的下拉菜单问题

回答

相关问题