先上效果图：
最小的ul就是一个最小的树枝，空间允许时可无限扩展。html如下：
<div class="panel panel-default">
<div class="panel-body"> <ul class="treeview">
<li><a href="#">Tree</a>
<ul>
<li><a href="#">Branch</a></li>
<li><a href="#">Branch</a>
<ul>
<li><a href="#">Stick</a></li>
<li><a href="#">Stick</a></li>
<li><a href="#">Stick</a>
<ul>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a>
<ul>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
</ul>
</li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
</ul>
</li>
<li><a href="#">Stick</a></li>
</ul>
</li>
<li><a href="#">Branch</a></li>
<li><a href="#">Branch</a></li>
</ul>
</li>
</ul> </div>
</div>
css如下：
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:;
padding:;
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:;
position:absolute;
top:;
left:;
border-left:1px solid;
bottom:15px;
}
.treeview li {
margin:;
padding:0 1em;
line-height:2em;
font-weight:;
position:relative
}
.treeview ul li:before {
content:"";
display:block;
width:10px;
height:;
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:;
}
js如下：
$.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("<i class='tree-indicator '>></i>");
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();
})
})