JQuery实现二级菜单，stop方法分析

效果图

完整效果图

一、HTML

    <div class="wrapper">
        <ul class="nav">
            <li>
                <a href="#">明星</a>
                <ul class="detail">
                    <li><a href="#">胡歌</a></li>
                    <li><a href="#">黄晓明</a></li>
                    <li><a href="#">马思纯</a></li>
                </ul>
            </li>
            <li>
                <a href="#">演员</a>
                <ul class="detail">
                    <li><a href="#">李幼斌</a></li>
                    <li><a href="#">何冰</a></li>
                    <li><a href="#">胡军</a></li>
                </ul>
            </li>
            <li>
                <a href="#">歌手</a>
                <ul class="detail">
                    <li><a href="#">蔡徐坤</a></li>
                    <li><a href="#">吴亦凡</a></li>
                    <li><a href="#">鹿晗</a></li>
                </ul>
            </li>
        </ul>
    </div>

二、CSS

CSS没有什么，只需要稍微关注一下提到的细节点就行了。

        * {margin: 0px;padding: 0px;}
        
        ul {list-style-type: none;}
        
        a {text-decoration: none;color: black;}

        .wrapper {width: 300px;}

        .wrapper ul.nav::after {
            content: "";
            display: block;
            clear: both;
        }

        .wrapper ul li {
            height: 30px;
            /*  此处height是功能实现的关键，固定高度height==line-hieght使得：
             *  当ul.detail display时呈现overflow效果，不会额外占据地方，不会将wrapper撑大，
             */
            float: left;
            text-align: center;
            font-size: 14px;
            width: 100px;
            line-height: 30px;
            background-color: rgb(88, 187, 190);
            cursor: pointer;
        }

        .wrapper ul li:hover{color: white;}

        .wrapper ul li ul.detail {display: none;}

        .wrapper ul li ul li {background-color: rgb(129, 221, 224);}

        .wrapper ul li ul li:hover {background-color: rgb(178, 246, 248);}

细节点：

• 一级菜单是float：left，因此需要使用伪元素after清除浮动流；
• .wrapper ul li 需要设置 height==line-height ，使得当二级菜单显示时不会讲wrapper撑大，导致影响到后续元素的位置；固定height使得显示的二级菜单成为overflow的那部分；效果对比如下：

  • height == line-height == 30px

    
    height == line-height == 30px

  • height未指定，line-height==30px

    
    height未指定，line-height==30px

三、JQuery

    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            // stop很重要，试验了好久.......这种写法算是比较满意的动画效果
            $("div ul.nav>li").mouseenter(function () {
                $(this).find(".detail").stop(true, true)
                    .show("fast");
            }).mouseleave(function () {
                $(this).find(".detail").hide("fast");
            })
        });
    </script>

重点：

• JQuery中动画队列的消除，stop方法的应用；
  • 直接使用不带参数，stop()方法会结束当前正字啊进行的动画，并立即执行队列中的下一个动画。
  • stop（）方法有两个参数，第一个参数clearQueue，将其设置为true，则会将当前元素接下来的尚未执行完的动画队列都清空。
  • 第二个参数gotoEnd，将其设置为true，可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况。
• 网上很多代码的处理都是直接使用.stop().show("fast")以及.stop().hide("fast")但是在我暴力测试之下发现 有致命bug：在缓慢情况下能正常使用，在快速划过时会出错。
  stop()+stop()
• 那么.stop().show("fast")+.hide("fast")呢？ 实验表明也会有bug：
  stop()+null
• 那么.stop(true).show("fast")+.stop(true).hide("fast")呢？有bug
  .stop(true)+.stop(true)
• 那么.stop(true).show("fast")+.hide("fast")呢？有bug
  .stop(true)+null
• 等等等等、、、后续的就不在测试了..
• 最后我得到的最佳方法就是.stop(true,true).show("fast")+.hide("fast"),效果最佳，无bug
  .stop(true,true)+null

完整代码：链接：https://pan.baidu.com/s/1BavI1UGR_PzUPMernS4xmg 提取码：f0oa

作者简介：一木一生，一个散发着单身狗清香的程序猿。同时，欢迎关注我的CSDN博客 Vito_w7 。
本文为作者原创，未经允许，不得转载，违者必究！