先上效果图：
最小的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: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;}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(); ???})})基于jquery的简洁树形折叠菜单
原文地址：http://www.cnblogs.com/pomelott/p/7498770.html