下拉列表多次保持上下滑动

Question

jQuery下拉列表多次保持上下滑动

.HTML：

<nav class="main-nav">
    <img src="img/logo.jpg"> 
    <ul class="nav-list">
        <li><a href="#">Home Page</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Products</a>
            <ul class="dropdown">
                <li><a href="#"> Product 1</a></li>
                <li><a href="#"> product 2</a></li>
                <li><a href="#">product 3</a></li>
                <li><a href="#">Product 4</a></li>
                <li><a href="#">product 5</a></li>
                <li><a href="#">product 6</a></li>
            </ul>
        </li>
        <li><a href="#">Career</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
</nav>

JavaScript：

$(function () {
    $("li").has(".dropdown").hover(
        function () {
            $(this).find(".dropdown").slideDown();
        },
        function () {
            $(this).find(".dropdown").slideUp();
        }
    );
});

Answer 1

当您快速连续多次将鼠标悬停在"产品"项中时，幻灯片向下和幻灯片动画将排队。调用 stop() 以在执行新的幻灯片向下或向上滑动之前取消当前动画：

$("li").has(".dropdown").hover(
    function () {
        $(this).find(".dropdown").stop().slideDown();
    },
    function () {
        $(this).find(".dropdown").stop().slideUp();
    }
);