简单的 ul li 树形菜单

简单的 ul li 树形菜单

在实际开发中，我们经常遇到树形菜单，闲暇之余，特此简单研究了一下，欢迎吐槽！

---

前言

所谓的树形菜单，无非就是 ul li的嵌套使用，如果有两级目录，就需要在li里再嵌套一层ul li，以此类推。

本例效果：
1.点击的li如果是叶子节点，则该节点变为红色字体；
2.点击的不是叶子节点，则展示子节点，再次点击，则影藏子节点。

代码块

html代码，例如：

   

      

        1234
        

          
1
          
2
          
3
          
4
        
      
      

        5678
        

          

            
            5
            

              
51
              
52
              
53
              
54
            
          
          
6
          
7
          
8
        
      
      
9
      
10
      
11
    

css代码，例如：

ul {
  list-style: none;
}
ul li {
  cursor: pointer;
}
ul li a {
  display: block;
}
ul li ul {
  display: none;
  padding-left: 20px;
}
em {
  display: inline-block;
  height: 14px;
  width: 14px;
  margin-right: 5px;
  float: left;
  position: relative;
  top: 5px;
  background: url('../images/ico/toggle-ico.png') 0 0 no-repeat;
}
.active {
  color: red;
}
.open > a {
  color: red;
}
.open > em {
  background-position: -23px 0;
}

js代码，例如：

 $('li>a,li>em').click(function(event) {
        /* Act on the event */
        if($(this).parent('li').find('ul').length>0){
          if($(this).siblings('ul').is(':hidden')){
            $(this).parent('li').addClass('open').children('ul').show();
            $(this).parent('li').siblings().removeClass('open').children('ul').hide();
          }else{
            $(this).parent('li').removeClass('open').children('ul').hide();
          }
        }else{
          $(this).parent('li').siblings().removeClass('open');
        }
        $(this).parent('li').siblings().children('ul').hide();
        $(this).addClass('active').parent('li').siblings('li').find('a').removeClass('active');
      })

效果图