二級菜單的製做(升級版) ,通常數據從後臺獲取,這邊用數組簡單的模擬

時間 2020-05-24

標籤二級菜單製做升級版常數據從後臺獲取數組簡單模擬简体版

原文原文鏈接

二級菜單的製做(升級版) ,通常數據從後臺獲取,這邊用數組簡單的模擬

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .nav{
        list-style: none;
        width: 300px;
        margin: 100px auto;
    }
    .nav > li{
        border: 1px solid #000;
        line-height: 35px;
        border-bottom: none;
        text-indent: 2px;
        position: relative;
    }
    .nav li:last-child{
        border-bottom:  1px solid #000;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .nav li:first-child{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .nav >li > span{
        display: inline-block;
        background-image: url(./img/right.png) ;
        width: 32px;
        height:32px ;
        position: absolute;
        right: 10px;
        top: 5px;

    }
    .sub >li{
        list-style: none;
        
        border-bottom: 1px solid white;
    }
    .sub >li:hover{
        background: red;
    }

    .nav > .current >span{
        transform: rotate(90deg);
    }
    .sub{
        display: none;
    }
</style>
<body>
    <ul class="nav">
<!--        <li class="">一級菜單<span></span>-->
<!--            <ul class="sub">-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--            </ul>-->
<!--        </li>-->
<!--        <li>一級菜單<span></span>-->
<!--            <ul class="sub">-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--            </ul>-->
<!--        </li>-->
<!--        <li>一級菜單<span></span>-->
<!--            <ul class="sub">-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--            </ul></li>-->
<!--        <li>一級菜單<span></span>-->
<!--            <ul class="sub">-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--            </ul></li>-->
<!--        <li>一級菜單<span></span>-->
<!--            <ul class="sub">-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--            </ul></li>-->
<!--        <li>一級菜單<span></span>-->
<!--            <ul class="sub">-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--                <li>二級菜單</li>-->
<!--            </ul></li>-->
    </ul>
</body>
<script src="./jquery.js"></script>
<script>
    $(function () {
        //模擬後臺返回的數據
        var first_men =["一級菜單1","一級菜單2","一級菜單3","一級菜單4","一級菜單5"];
        var second_men=["二級菜單1","二級菜單2","二級菜單3","二級菜單4"];
        var str =``;
        for(let i=0;i<first_men.length;i++){
            str +=`<li class="">${first_men[i]}<span></span>
            <ul class="sub">`
            for(var k=0;k<second_men.length;k++){
               str +=` <li>${second_men[k]}</li>`
            }
            str+=`</ul>
        </li>`

        }
        $(".nav").html(str)

        //1.監聽一級菜單的點擊事件
        $(".nav ").delegate("li","click",function () {
            //1.1拿到二級菜單
            var $sub =$(this).children(".sub")
            //1.2讓二級菜單展開
            $sub.stop().slideToggle(1000); //再次點擊隱藏

            //1.3拿到因此非當前二級菜單
           var $otherSub =$(this).siblings().children(".sub")

            //1.4讓因此非當前二級菜單收起
            $otherSub.slideUp(1000)

            //1.5讓被點擊的一級菜單箭頭旋轉
            $(this).addClass("current");

           //1.6讓非被點擊的一級菜單還原
            $(this).siblings().removeClass("current");

        })
        
    })

</script>
</html>

PS:在生個版本之上改進的更加貼近實際項目,點擊一級菜單展開,再點擊就摺疊

效果圖