左侧菜单栏的展开收缩效果

     

如图实现的是鼠标点击相应菜单栏会有子菜单出现。

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';}}