左側菜單欄的展開收縮效果 - iriliguo－IT工程師數位筆記本

文章出處

如圖實現的是鼠標點擊相應菜單欄會有子菜單出現。

css代碼：

　.g_bottom{
    font-size: 16px;
    line-height: 50px;
    border-bottom: 1px solid gainsboro;
    cursor: pointer;
}
.bot {
    border-bottom:none;
}
.g_arrow {
    color: gray ;
}
.g_st {
    line-height: 25px;
    color: gray;
}
.g_navtxt{
    font-size: 16px;
}

html代碼：

        <div class="g_order">
            <ul >
                <li class=" g_bottom" onclick=show("g_snav0")><a class="g_navtxt">我的訂單<span class="g_arrow">> </span></a>
                    <ul  id="g_snav0" style="display:none">
                        <li class="g_st">全部訂單</li>
                        <li class="g_st">待付款</li>
                        <li class="g_st">代收貨</li>
                        <li class="g_st">待評價</li>
                        <li class="g_st">退貨退款</li>
                        <li class="g_st">訂單回收站</li>

                    </ul>
                </li>

                <li class="g_bottom"><a class="g_navtxt">我的錢包<span class="g_arrow">> </span></a></li>
                <li class="g_bottom"><a class="g_navtxt">我的理財<span class="g_arrow">> </span></a></li>
                <li class="g_bottom"  onclick=show("g_snav1")><a class="g_navtxt">優惠特權<span class="g_arrow">> </span></a>
                    <ul  id="g_snav1" style="display:none">
                        <li class="g_st">會員中心</li>
                        <li class="g_st">店鋪優惠劵</li>
                        <li class="g_st">現金券</li>
                    </ul>

                </li>
                <li class="g_bottom"><a class="g_navtxt">地址管理<span class="g_arrow">> </span></a></li>
                <li class="g_bottom" onclick=show("g_snav2")><a class="g_navtxt">安全設置<span class="g_arrow">> </span></a>
                    <ul  id="g_snav2" style="display:none">
                        <li class="g_st">設置密碼</li>
                        <li class="g_st">綁定手機</li>
                        <li class="g_st">數字證書</li>
                    </ul>
                </li>
                <li class="g_bottom" onclick=show("g_snav3")><a class="g_navtxt">維權管理<span class="g_arrow">> </span></a>
                    <ul  id="g_snav3" style="display:none">
                        <li class="g_st">投訴管理</li>
                        <li class="g_st">舉報管理</li>

                    </ul>
                </li>
                <li class="g_bottom bot" onclick=show("g_snav4")><a class="g_navtxt">帳號設置<span class="g_arrow">> </span></a>
                    <ul  id="g_snav4" style="display:none">
                        <li class="g_st">基本信息</li>
                        <li class="g_st">修改頭像</li>

                    </ul>
                </li>
            </ul>
        </div>

　js代碼：

  function show(e) {
        if(document.all(e).style.display=='none') {
        document.all(e).style.display='block';}
    else{document.all(e).style.display='none';}}

文章列表