JQuery下拉菜单问题

Question

在阅读描述之前，请看一下我在 JSfiddle 中创建的下拉菜单

http://jsfiddle.net/akhilpaul/bKxXZ/

我有一个 JQuery 下拉菜单，它是我从教程中获取的:)，它的效果很好，就像平滑地为下拉功能设置动画一样。问题是当我将鼠标悬停在菜单右侧的向下箭头(现在是红色)时的动画(下拉)但这不是我正在寻找的实际上我需要在我将鼠标悬停在菜单上时为下拉菜单设置动画(我们的服务和地点)。我对 JQuery 进行了轻微更新，但没有用。我额外添加到 Jquery 的是

向具有下拉列表的特定 li 添加了一个类(.drop)，并像这样评论了 span 函数

 //$("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>

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

但这两个功能都不起作用!

期待您对此问题的回复

谢谢

保罗

Answer 1

你的代码可以浓缩成这样:

$(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/

变化如下:

1. 将您的 .mouseover() 选择器从选择范围更改为选择任何具有子导航的 li。
2. 将您的选择器从 $(this).parent() 更改为仅 $(this) 因为我们的选择器现在指向父级。
3. 删除触发器跨度代码，您现在不需要它。
4. 删除触发跨度 .hover() 代码。
5. 将 .mouseover() 更改为 .hover() 并将其与现有的 .hover() 合并，因为它们都适用于相同的元素。