悬停时停止的下拉高度答案

【问题标题】：Dropdown height stopping on hover悬停时停止的下拉高度
【发布时间】：2014-04-07 22:08:37
【问题描述】：

我创建了一个非常基本的 jQuery 下拉菜单。问题是，当您将鼠标悬停在下拉菜单上然后鼠标悬停然后再次快速鼠标悬停时，它会暂停但 UL 高度会发生变化？我猜它与 stop() 有关，但我无法纠正它。

下面的jQuery：

   $(document).ready(function () {
        $('.HeaderNav > li').hover(function () {
            $('ul', this).stop().slideDown(300);
        }, function () {
            $('ul', this).stop().slideUp(300);
        });

        $('.HeaderNav li:has(> ul)').addClass('HasChild');
        $('.HeaderNav li:has(> ul)').addClass('Dropdown');

        $('li.Dropdown ul li').on('mouseover', function () {
            $(this).parent().prev().addClass('Active');
        }).on('mouseout', function () {
            $(this).parent().prev().removeClass('Active');
        });
    });

我为说明目的创建了一个小提琴http://jsfiddle.net/JtYA2/1/

任何帮助/建议将不胜感激:)

【问题讨论】：

当然，如果是 CSS 造成的？
您是否尝试过删除 .stop() - 这似乎为我解决了您的问题。
谢谢尼克，我知道这确实有效，但我在那里停下来的原因是为了阻止 ul 上下滑动几次，因为你快速将鼠标悬停在它上面几次。

标签： javascript jquery html css

【解决方案1】：

尝试使用：fiddle。

$(document).ready(function () {
    $('.HeaderNav > li').hover(function () {
        $('ul', this).stop(true, false).slideToggle(300);
    });

    $('.HeaderNav li:has(> ul)').addClass('HasChild');
    $('.HeaderNav li:has(> ul)').addClass('Dropdown');

    $('li.Dropdown ul li').on('mouseover', function () {
        $(this).parent().prev().addClass('Active');
    }).on('mouseout', function () {
        $(this).parent().prev().removeClass('Active');
    });
});

【讨论】：

【解决方案2】：

查看stop()函数的参数：

http://css-tricks.com/examples/jQueryStop/

【讨论】：

【解决方案3】：

DEMO

Javascript

$(document).ready(function () {
    $('.HeaderNav > li').stop(true).hover(function () {
        $('ul', this).filter(':not(:animated)').stop().slideDown(300);
    }, function () {
        $('ul', this).stop().slideUp(300);
    });

    $('.HeaderNav li:has(> ul)').addClass('HasChild');
    $('.HeaderNav li:has(> ul)').addClass('Dropdown');

    $('li.Dropdown ul li').on('mouseover', function () {
        $(this).parent().prev().addClass('Active');
    }).on('mouseout', function () {
        $(this).parent().prev().removeClass('Active');
    });
});

Reference

【讨论】：

【解决方案4】：

试试这个：

$(document).ready(function () {
    $('.HeaderNav > li').hover(function () {
        $('ul', this).slideDown(300);
    }, function () {
        $('ul', this).slideUp(100);
    });

    $('.HeaderNav li:has(> ul)').addClass('HasChild');
    $('.HeaderNav li:has(> ul)').addClass('Dropdown');

    $('li.Dropdown ul li').on('mouseover', function () {
        $(this).parent().prev().addClass('Active');
    }).on('mouseout', function () {
        $(this).parent().prev().removeClass('Active');
    });
});

我删除了 stop() 函数调用，并将 slideUp() 的参数设置为 100。

您的问题正在发生，因为 ul slideUp 的速度比您重新悬停 ul 的速度慢。

希望这会有所帮助。

【讨论】：

【解决方案5】：

有两种解决方案 1. $('ul', this).stop().slideUp(10); // 减少滑动的时间跨度或者 2. 问题似乎出在最后一个 li 的阴影上，所以如果我们去掉最后一个 li 的阴影，它就会起作用

【讨论】：