左边栏二级菜单点击显示点击隐藏

 

自己手撸的，记录一下

 

<meta charset="utf-8">
<style>
    .ok,.two{
        list-style: none;
        width: 200px;
        margin-top: 0;
        padding-left: 0;
    }
    .ok li{
        background: darkgoldenrod;
    }
    .d{
        height: 35px;
        line-height: 35px;
        padding-left: 5px;
        color: white;
        cursor: pointer;
    }
    .d:nth-of-type(n+1){
        margin-top: 5px;

    }
    .two{
        padding-left: 0px;
    }
    .two li{
        background: chocolate;
        margin-top: 5px;
        padding-left: 10px;


    }
    .none{
        display: none;
    }
    .block{
        display: block;
    }
    .three{
        list-style: none;
    }
</style>

<div>
    <ul class="ok" id="t">
        <li class="d">产品中心</li>
        <ul class="two block">
            <li>产品系列一</li>
            <li>产品系列二</li>
            <li>产品系列三</li>
        </ul>
        <li class="d">新闻中心</li>
        <ul class="two block">
            <li>公司新闻</li>
            <li>行业新闻</li>
        </ul>
    </ul>
</div>

<script>
    var a= document.getElementById("t");
    var s=a.children;
    for(var i=0;i<=s.length-1;i++){
        if(s[i].classList.contains('d')){
            s[i].onclick= function () {
                var zt=this.nextElementSibling;
                console.log(zt);
                if (zt.classList.contains('block')){
                    this.nextElementSibling.setAttribute('class','none');
                }
                else{
                    this.nextElementSibling.classList.add('two','block');
                }
            };
        }
    }
</script>