树导航效果图：
组合模式的描述：
将对象组合成树形结构以表示“部分-整体”的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。
我们把部分用Leaf表示， 把整体用Composite表示。组合模式是有一定规律的，在实现树导航的情况下，Composite需要包含一个以上Leaf，也可以包含一个以上Leaf和一个以Composite，为什么说要包含一个以上的，如果Composite不包含任何子child的话那么它就是Leaf，Leaf表示是最后一层结节。
树形导航代码片段：
[data-panel="tree"] .tree-folder, [data-panel="tree"] .tree-only, [data-panel="tree"] .tree-child { padding-left: 20px;
}
[data-panel="tree"] .tree-root, [data-panel="tree"] .tree-folder, [data-panel="tree"] .tree-only, [data-panel="tree"] .tree-child {
position: relative;
}
[data-panel="tree"] .folder {
display: block;
position: relative;
padding: 4px 6px;
color: #333;
cursor: pointer;
overflow: hidden;
}
[data-panel="tree"] b {
float: left;
margin-top: 4px;
background-position: 0 -35px;
width: 20px;
height: 16px;
}
[data-panel="tree"] i, [data-panel="tree"] b {
background-image: url("../image/tree/tree_icon.png");
background-repeat: no-repeat;
}
[data-panel="tree"] .tree-only > i {
background-position: 0 -151px;
}
[data-panel="tree"] i {
position: absolute;
top: 50%;
left: 0;
height: 28px;
width: 16px;
margin-top: -14px;
}
[data-panel="tree"] .tree-folder > i {
background-position: 0 -61px;
cursor: pointer;
}
[data-panel="tree"] .tree-child:not(:last-child) {
background-image: url("../image/tree/tree_line.png");
background-position: 0 0;
background-repeat: repeat-y;
}
[data-panel="tree"] .tree-folder.last > i {
background-position: 0 -91px;
}
[data-panel="tree"] .tree-only.last > i {
background-position: 0 -181px;
}
[data-panel="tree"] .folder.empty {
color: #999;
}
[data-panel="tree"] .tree-root > .toolbar, [data-panel="tree"] .tree-folder > .toolbar, [data-panel="tree"] .tree-only > .toolbar {
position: absolute;
top: 0;
right: 0;
display:none;
}
[data-panel="tree"] .tree-root > .toolbar > a, [data-panel="tree"] .tree-folder > .toolbar > a, [data-panel="tree"] .tree-only > .toolbar > a {
display: inline-block;
padding: 4px 6px;
color: #00a0e9;
}
[data-panel="tree"] .tree-root:hover > .folder, [data-panel="tree"] .tree-folder:hover > .folder, [data-panel="tree"] .tree-only:hover > .folder {
background-color: #fafafa;
}
[data-panel="tree"] .tree-root:hover > .toolbar, [data-panel="tree"] .tree-folder:hover > .toolbar, [data-panel="tree"] .tree-only:hover > .toolbar {
display: block
}
<div id="groupView" class="groupView panel-body" data-panel="tree"> <div class="tree-folder last"><b></b><a class="folder" href="/Favorite/index/0" id="0">全部[0]</a></div> <div class="tree-child"> <div class="tree-only"><i></i><a class="folder" href="/Favorite/index/0" id="0">未分组[1]</a></div> <div class="tree-folder"><i></i><b></b><a class="folder" href="/Favorite/index/6" id="6">客户[1]</a></div> <div class="tree-child"> <div class="tree-only"><i></i><a class="folder" href="/Favorite/index/8" id="8">西方客户[1]</a></div> <div class="tree-only last"><i></i><a class="folder empty" href="/Favorite/index/9" id="9">东方客户[0]</a></div> </div> <div class="tree-only"><i></i><a class="folder" href="/Favorite/index/13" id="13">修改分组名称[2]</a></div> <div class="tree-folder"><i></i><b></b><a class="folder" href="/Favorite/index/16" id="16">计算机[0]</a></div> <div class="tree-child"> <div class="tree-only"><i></i><a class="folder empty" href="/Favorite/index/17" id="17">硬件工程师[0]</a></div> <div class="tree-only last"><i></i><a class="folder empty" href="/Favorite/index/18" id="18">软件工程师[0]</a></div> </div> <div class="tree-only last"><i></i><a class="folder empty" href="/Favorite/index/40" id="40">最新添加[0]</a></div> </div></div>
tree_icon.png图片地址：http://img.blog.csdn.net/20160424123943829
tree_line.png图片地址：http://img.blog.csdn.net/20160424123959314
分析HTML代码结果
我们从HTML代码中找到一些规律，从图中看几个框框：
第一个红色的内的第一个元素标签div.tree-child, 红框外距离红框最近的一个元素是div.tree-folder.
通过这个红框来看，我们不难分析出粉红框 和黑框内的代码和红框的是相似的。
我们在来看看还有没有其它的规律,
也许你已经看出来了一个了，有的div的class属性值是tree-only而有的是tree-only last，他们的区别是什么呢？
通过下图来看，带圈的是表示是有last选择器的。
通过HTML代码可以看出图片上有四个last选择器，而我们通过这张图片只看出三个。 想知道原因请看下图
原本通过代码看到的应该是这张图片，原因我不希望第一个节点元素显示它前面的那个节点图片，所以我们是通过程序控制掉了它。
我们来看下一张图片，红框里的代码是<b></b>，我们再看一下其它的div.tree-folder元素内的第一个元素怎么是<i></i>呢？第二元素才是<b></b>，原因很简单，<i></i>显示的是节点图片。原因我不希望显示第一个节点图片，所以我们就没有把它添加到DOM元素中.
那么我们再来找下一个规律：我们看一下HTML代码又发现一个那就是div中有带empty的，有的就不带empty，empty是空的意思，在这里说明没有数据。它是在效果中那里体现的呢？请看一下图
大家明白了吗？，这个红框里的代码是带有empty选择器的元素。empty是用来控制是否有数据的样式。这些都是通过js来控制的。