slideDown()、slideUp()反复执行的问题

 <ul class="main">
            <li><a href="#">菜单一</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="#">菜单二</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="#">菜单三</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
        </ul>
stop()方法来停止重复动画
jQuery(document).ready(function($) {
            $(".main>li").hover(function() {
                $(this).children("ul").slideDown();
            }, function() {
                $(this).children("ul").stop(true,false).slideUp();
            });                                             
        });
stop([clearQueue],[jumpToEnd]);
clearQueue:如果设置成true,则清空队列,可以立即结束动画。
jumpToEnd:如果设置成true,则完成队列,可以立即完成动画。可选,默认是false

使用toggle()方法替代
jQuery(document).ready(function($) {
            $(".main>li").hover(function() {
                $(this).children("ul").toggle();
            });
        });

 

 
posted @ 2019-03-13 13:36  一城柳絮吹成雪  阅读(692)  评论(0编辑  收藏  举报