jQuery实现文档树效果

情形：本类别下面有好多子类别，每个子类别下面又有好多孙类别；需求：当点击本类别时，子类别如果是显示的就让它隐藏，子类别如果是隐藏的就让它显示。

效果如下：

图（1）点击前

图（2）点击后

代码如下：

 
 
 
  *{
   margin:0;
   padding:0;
   list-style: none;
  }
  .box{
   width: 250px;
   height: auto;
   padding: 20px;
   background: lightgrey;
   margin:0 auto;
  }
  .box li{
   line-height: 30px;
   
   position: relative;
  }
  .box li em{
   position: absolute;
   left:0;
   top:7px;
   width: 16px;
   height: 16px;
   background-image: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=123b5048273b92eb544ad6eb0ed57c44");
   background-size:100%;
   cursor: pointer;
  }
  .box li em.open{
   background-image: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8f89447399822b0294ae590ccc641bf5");
   background-size:100%;
  }
  .box li span{
   padding-left: 20px;
   
  }
  .box ul{
   display: none;
  }
  .two{
    margin-left: 20px;
  }
  .three{
   margin-left: 40px;
  }
  .four{
   margin-left: 40px;
  }
  
 



 
第一级第一个
  

   
第二级第一个
   
第二级第二个
    

     
第三级第一个
      

第四级第一个
第四级第二个
      
     
     
第三级第二个
    
   
   
第二级第三个
    

     
第三级第一个
     
第三级第二个
    
   
  
 
 
第一级第一个
  

   
第二级第一个
   
第二级第二个
    

     
第三级第一个
      

第四级第一个
第四级第二个
      
     
     
第三级第二个
    
   
  
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！