文章描述：手風(fēng)琴下拉菜單示例代碼

<!--html-->
<ul class="menuList">
    <li class="parentItem">
        <div class="parentName">
            <span>一級(jí)菜單1</span>
            <img src="/images/icon-transform1.png" class="arrowIco">
        </div>
        <ul class="childList">
            <li class="childItem">二級(jí)菜單</li>
            <li class="childItem">二級(jí)菜單</li>
            <li class="childItem">二級(jí)菜單</li>
        </ul>
    </li>
    <li class="parentItem">
        <div class="parentName">
            <span>一級(jí)菜單2</span>
            <img src="/images/icon-transform1.png" class="arrowIco">
        </div>
        <ul class="childList">
            <li class="childItem">二級(jí)菜單</li>
            <li class="childItem">二級(jí)菜單</li>
            <li class="childItem">二級(jí)菜單</li>
        </ul>
    </li>
    <li class="parentItem">
        <div class="parentName">
            <span>一級(jí)菜單3</span>
            <img src="/images/icon-transform1.png" class="arrowIco">
        </div>
        <ul class="childList">
            <li class="childItem">二級(jí)菜單</li>
            <li class="childItem">二級(jí)菜單</li>
            <li class="childItem">二級(jí)菜單</li>
        </ul>
    </li>
</ul>

/*css*/
.menuList{
    width:100%;
    margin-top:15px;
}
.menuList .parentItem{
    width:100%;
    cursor:pointer;
}
.menuList .parentItem .parentName{
    width:100%;
    height:38px;
    border:1px solid #eee;
    border-bottom:none;
    padding:0 10px;
    font-size:15px;
    color:#333;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
}
.menuList .parentItem:last-child .parentName{
    border-bottom:1px solid #eee;
}
.menuList .parentItem.parentName span{
    width:calc(100% - 24px);
}
.menuList .parentItem .parentName .arrowIco{
    transform:rotate(180deg);
    transition:All 0.4s;
    -webkit-transition:All 0.4s;
}
.menuList .parentItem .parentName .arrowIco.rotate{
    transform:rotate(360deg) translateZ(0);
    -webkit-transform:rotate(360deg) translateZ(0);
}
.menuList .parentItem .childList{
    width:100%;
    background:#f8f9FF;
    display:none;
}
.menuList .parentItem .childList .childItem{
    width:100%;
    padding:8px 15px;
    color:#999;
    font-size:13px;
    cursor:default;
}
.menuList .parentItem .childList .childItem:hover{
    background:#e6edff;
    color:#333;
}

//js
$(function(){
        $(".menuList .parentItem").find(".parentName").on("click",function(){
            var thisFindTog = $(this).parent().find(".childList");
            if(thisFindTog.css("display")=="none"){
                $(this).parent().find(".parentName").find(".arrowIco").addClass("rotate");
                $(this).parent().siblings().find(".parentName").find(".arrowIco").removeClass("rotate");
                $(this).parent().find(".childList").slideDown();
                $(this).parent().siblings().find(".childList").slideUp();
            }else{
                $(this).parent().find(".parentName").find(".arrowIco").removeClass("rotate");
                $(this).parent().find(".childList").slideUp();
            }
        });
    });

下拉菜單.png

注：寫代碼時(shí)自己記錄整理裕循，有需要請(qǐng)自取，謝謝關(guān)注支持净刮！