国产AV一区仑乱,国产精品高潮呻吟久,日韩一直操

效果圖

完整效果圖

一、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沒(méi)有什么，只需要稍微關(guān)注一下提到的細(xì)節(jié)點(diǎn)就行了。

        * {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是功能實(shí)現(xiàn)的關(guān)鍵，固定高度height==line-hieght使得：
             *  當(dāng)ul.detail display時(shí)呈現(xiàn)overflow效果，不會(huì)額外占據(jù)地方，不會(huì)將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);}

細(xì)節(jié)點(diǎn)：

一級(jí)菜單是float：left，因此需要使用偽元素after清除浮動(dòng)流；
.wrapper ul li 需要設(shè)置 height==line-height ，使得當(dāng)二級(jí)菜單顯示時(shí)不會(huì)講wrapper撐大，導(dǎo)致影響到后續(xù)元素的位置；固定height使得顯示的二級(jí)菜單成為overflow的那部分；效果對(duì)比如下：
- 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很重要，試驗(yàn)了好久.......這種寫(xiě)法算是比較滿意的動(dòng)畫(huà)效果
            $("div ul.nav>li").mouseenter(function () {
                $(this).find(".detail").stop(true, true)
                    .show("fast");
            }).mouseleave(function () {
                $(this).find(".detail").hide("fast");
            })
        });
    </script>

重點(diǎn)：

JQuery中動(dòng)畫(huà)隊(duì)列的消除，stop方法的應(yīng)用；
- 直接使用不帶參數(shù)，stop()方法會(huì)結(jié)束當(dāng)前正字啊進(jìn)行的動(dòng)畫(huà)，并立即執(zhí)行隊(duì)列中的下一個(gè)動(dòng)畫(huà)。
- stop（）方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)clearQueue，將其設(shè)置為true，則會(huì)將當(dāng)前元素接下來(lái)的尚未執(zhí)行完的動(dòng)畫(huà)隊(duì)列都清空。
- 第二個(gè)參數(shù)gotoEnd，將其設(shè)置為true，可以用于讓正在執(zhí)行的動(dòng)畫(huà)直接到達(dá)結(jié)束時(shí)刻的狀態(tài)，通常用于后一個(gè)動(dòng)畫(huà)需要基于前一個(gè)動(dòng)畫(huà)的末狀態(tài)的情況。
網(wǎng)上很多代碼的處理都是直接使用.stop().show("fast")以及.stop().hide("fast")但是在我暴力測(cè)試之下發(fā)現(xiàn) 有致命bug：在緩慢情況下能正常使用，在快速劃過(guò)時(shí)會(huì)出錯(cuò)。

stop()+stop()
那么.stop().show("fast")+.hide("fast")呢？實(shí)驗(yàn)表明也會(huì)有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
等等等等、、、后續(xù)的就不在測(cè)試了..
最后我得到的最佳方法就是.stop(true,true).show("fast")+.hide("fast"),效果最佳，無(wú)bug

.stop(true,true)+null