左侧菜单练习

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .left{
            width: 20%;
            height: 500px;
            float: left;
            background-color: coral;
        }
        .title{
            text-align: center;
            line-height: 40px;
            background-color: #2aabd2;
            color: white;
        }

        .item{
            padding: 10px;
        }
        .hide{
            display: none;
        }
    </style>
</head>


<body>

<div class="left">
    <div  class="item">
       <div class="title">菜单一</div>
        <ul class="con">
            <li>111111111111111</li>
            <li>111111111111111</li>
            <li>111111111111111</li>
        </ul>
    </div>
    <div  class="item">
         <div class="title">菜单二</div>
        <ul class="con hide">
            <li>22222222222222</li>
            <li>22222222222222</li>
            <li>22222222222222</li>
        </ul>
    </div>
    <div class="item">
         <div class="title">菜单三</div>
        <ul class="con hide">
            <li>333333333333333</li>
            <li>333333333333333</li>
            <li>333333333333333</li>
        </ul>
    </div>
</div>
<script>
      var eles_title=document.getElementsByClassName("title");
    for (var i=0;i<eles_title.length;i++){
         eles_title[i].onclick=function(){

             this.nextElementSibling.classList.remove("hide");

             for(var j=0;j<eles_title.length;j++){

                 if (eles_title[j]!=this){
                     eles_title[j].nextElementSibling.classList.add("hide")
                 }

             }


         }

    }
    var eles_title = document.getElementsByClassName('title')
    for (var i=0;i<eles_title.length;i++){
        eles_title[i].onclick=function () {
            this.nextElementSibling.classList.remove('hide')
            for (var j=0;j<eles_title.length;j++){
                if(eles_title[j] != this){
                    eles_title[j].nextElementSibling.classList.add(('hide'))
                    /*
                    nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）；
                    nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；
                    */
                }
            }
        }
    }

</script>
</body>
</html>