js树状菜单

html部分

<ul class="tree">
  <li><span><a href="#">JavaScript</a></span>
    <ul>
      <li><span><a href="#">JavaScript</a></span>
        <ul>
          <li><span><a href="#">JavaScript</a></span>
            <ul>
              <li><a class="active" href="#">AngularJS</a></li>
              <li><a href="#">React</a></li>
              <li><a href="#">Backbone</a></li>
            </ul>
          </li>
          <li><a href="#">jQuery UI</a></li>
          <li><a href="#">jQuery Mobile</a></li>
        </ul>
      </li>
      <li><span><a href="#">JavaScript</a></span>
        <ul>
          <li><a class="active" href="#">AngularJS</a></li>
          <li><a href="#">React</a></li>
          <li><a href="#">Backbone</a></li>
        </ul>
      </li>
      <li><span><a href="#">JavaScript</a></span>
          <ul>
            <li><a class="active" href="#">AngularJS</a></li>
            <li><a href="#">React</a></li>
            <li><a href="#">Backbone</a></li>
          </ul>
      </li>
    </ul>
  </li>
</ul>

css部分

*{list-style:none;border:none;}
body{font-family:Arial;background-color:#2C3E50;}
.tree {  color:#46CFB0;width:800px;margin:100px auto;}
.tree li,
.tree li > a,
.tree li > span {
    padding: 4pt;
    border-radius: 4px;
}

.tree li a {
   color:#46CFB0;
    text-decoration: none;
    line-height: 20pt;
    border-radius: 4px;
}

.tree li a:hover {
    background-color: #34BC9D;
    color: #fff;
}

.active {
    background-color: #34495E;
    color: white;
}

.active a {
    color: #fff;
}

.tree li a.active:hover {
    background-color: #34BC9D;
}
span:before{
  content:'+';
  display: inline-block;
  margin-right: 4px;
}
.on:before{
  content:'-';
}

js部分

 var span=document.getElementsByTagName('span');
  var li=[];
  var s=[];
  for(var i=0;i<span.length;i++){
    li.push(span[i].parentNode); //获取父级元素li
  }
  for(var j=0;j<li.length;j++){
      if(li[j].childNodes[2]){
        s.push(li[j].childNodes[2]);//获取子元素第三个ul
      } 
    }
  for(var i=0;i<s.length;i++){//隐藏全部ul
    s[i].style.display='none';
  }
  for(var i=0;i<span.length;i++){
    span[i].index=i;
    span[i].onclick=function(){//点击哪个显示哪个
      if(s[this.index].style.display=='none'){
         s[this.index].style.display='block';
         this.className='on';
       }else{
        s[this.index].style.display='none';
         this.className='';
       }
     
    }
  }