Question

jQuery drop-list正在多次保持幻灯片放下

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动画会排队。在执行新的slideDown或slideUp之前调用stop()取消当前动画：

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

下拉列表会多次保持上滑和下滑

1 个答案: