JQuery下拉菜单问题答案

【问题标题】：JQuery drop down menu issueJQuery下拉菜单问题
【发布时间】：2012-01-01 12:09:41
【问题描述】：

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

我有一个从教程中获取的 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>

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

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

期待您对此问题的回复

谢谢

保罗

【问题讨论】：

标签： jquery css jquery-ui

【解决方案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/

变化如下：

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

【讨论】：

【解决方案2】：

只换一行：

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

应该是：

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

见：http://jsfiddle.net/h5S3c/1/

我刚刚更新它以修复右侧的红/绿条。

【讨论】：

【解决方案3】：

查看这个更新的小提琴：http://jsfiddle.net/ecy7Q/

我基本上改了

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

进入

$("ul.topnav li").mouseover

并从后面的代码中删除 .parent()。

【讨论】：