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

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

当您快速连续多次将鼠标悬停在 Products 项上时，slideDown 和 slideUp 动画会排队。调用stop()在执行新的 slideDown 或 slideUp 之前取消当前动画:

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