Javascript 下拉列表会多次上下滑动

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>

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

---

当您快速连续多次将鼠标悬停在“产品”项目内外时，slideDown和slideUp动画将排队。调用以在执行新的slideDown或slideUp之前取消当前动画：

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