Question

在阅读说明之前，请先查看我在JSfiddle中创建的下拉菜单

我有一个JQuery下拉菜单，我从教程:)中获取，它的工作原理很像为下拉菜单功能设置平滑。当鼠标悬停在菜单右侧的向下箭头（现在为红色）时，问题是动画（下拉）但这不是我实际上我需要在鼠标悬停菜单时为下拉设置动画（我们的服务和地点）。我在JQuery上做了一些小小的更新，但是它不起作用..我额外添加到Jquery的是

将一个类（。drop）添加到具有下拉列表的特定li中，并像这样注释了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

只需更改一行：

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

应该是：

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

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

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

Answer 2

您的代码可以简化为：

$(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()合并，因为它们都适用于同一元素。

Answer 3

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

我基本上改变了

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

到

$("ul.topnav li").mouseover

并从后面的代码中删除.parent（）。

JQuery下拉菜单问题

3 个答案: