Question

我创建了一个非常基本的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/

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

Answer 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');
    });
});

Answer 2

检查stop（）函数的参数：

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

Answer 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

Answer 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的速度慢。

希望这会有所帮助。

Answer 5

有两种解决方案 1. $（＆＃39; ul＆＃39;，this）.stop（）。slideUp（10）; //减少幻灯片的时间跨度要么 2.似乎问题出在最后一个李的影子上，所以如果我们删除最后一个李的影子那么它就会起作用

下拉高度在悬停时停止

5 个答案: