Tree                    
        
                        
         
Branch
                        
         
Branch 
          
 
           
Stick
 
           
Stick
 
           
Stick 
            
 
             
Twig
 
             
Twig
 
             
Twig
 
             
Twig 
              
 
               
Leaf
 
               
Leaf
 
               
Leaf
 
               
Leaf
 
               
Leaf
 
               
Leaf
 
               
Leaf
 
               
Leaf
 
               
Leaf
 
              
 
 
             
Twig
 
             
Twig
 
            
 
 
           
Stick
 
          
 
                        
         
Branch
                        
         
Branch
                    
        
                
            
      
                    
     
    

div.panel:first-child {    margin-top:20px;}div.treeview {    min-width: 100px;    min-height: 100px;        max-height: 256px;    overflow:auto;        padding: 4px;        margin-bottom: 20px;        color: #369;        border: solid 1px;    border-radius: 4px;}div.treeview ul:first-child:before {    display: none;}.treeview, .treeview ul {    margin:0;    padding:0;    list-style:none;        color: #369;}.treeview ul {    margin-left:1em;    position:relative}.treeview ul ul {    margin-left:.5em}.treeview ul:before {    content:"";    display:block;    width:0;    position:absolute;    top:0;    left:0;    border-left:1px solid;    bottom:15px;}.treeview li {    margin:0;    padding:0 1em;    line-height:2em;    font-weight:700;    position:relative}.treeview ul li:before {    content:"";    display:block;    width:10px;    height:0;    border-top:1px solid;    margin-top:1px;    position:absolute;    top:1em;    left:0}.tree-indicator {    margin-right:5px;        cursor:pointer;}.treeview li a {    text-decoration: none;    color:inherit;        cursor:pointer;}.treeview li button, .treeview li button:active, .treeview li button:focus {    text-decoration: none;    color:inherit;    border:none;    background:transparent;    margin:0px 0px 0px 0px;    padding:0px 0px 0px 0px;    outline: 0;}

$.fn.extend({    treeview:    function() {        return this.each(function() {            var tree = $(this);            tree.addClass('treeview-tree');            tree.find('li').each(function() {                var stick = $(this);            });            tree.find('li').has("ul").each(function () {                var branch = $(this); //li with children ul                branch.prepend(">");                branch.addClass('tree-branch');                branch.on('click', function (e) {                    if (this == e.target) {                        var icon = $(this).children('i:first');                        $(this).children().children().toggle();                    }                })                branch.children().children().toggle();                branch.children('.tree-indicator, button, a').click(function(e) {                    branch.click();                    e.preventDefault();                });            });        });    }});//调用$(window).on('load', function () {    $('.treeview').each(function () {        var tree = $(this);        tree.treeview();    })})