原来项目中是通过原生的javascript代码实现了一个树形菜单，了解到jQuery的treeview插件能够通过更少行数的代码实现更为强大的功能，于是使用该插件实现了树形菜单并替换了项目中原来的代码，替换后代码更为简洁、效果更为美观。
1. 效果图
2. html代码部分
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="jquery.treeview.css" type="text/css"/>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.treeview.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#tree1").treeview({
persist: "cookie",// 页面刷新时记忆折叠的方式，locatioin：不保留；cookie：保留
collapsed: true, //初始化时的折叠状态，默认false
animated: "fast", // 展开子节点的速度，有：slow、normal、fast或指定速度值
control: "#zhankai" //必须是<a></a>标签
});
});
</script>
<div class="footer">
<div id="zhankai">
<a style="color:#fff;background:blue;width:80px;height:30px;line-height:30px;text-align:center;cursor:pointer;">闭合</a>
<a style="color:#fff;background:blue;width:80px;height:30px;line-height:30px;text-align:center;cursor:pointer;">展开</a>
</div>
<ul id="tree1" class="filetree">
<li><span class="folder">主节点</span>
<ul>
<li><span class="folder">子节点1</span>
<ul>
<li>子节点的子节点1</li>
<li>子节点的子节点2</li>
<li>子节点的子节点3</li>
</ul>
</li>
<li><span class="folder">子节点2</span></li>
<li><span class="folder">子节点3</span>
<ul>
<li>子节点的子节点1</li>
<li>子节点的子节点2</li>
<li>子节点的子节点3</li>
</ul>
</li>
</ul>
</li>
<li><span class="folder">主节点2</span>
<ul>
<li>子节点1</li>
<li>子节点2</li>
<li>子节点3</li>
</ul>
</li>
<li><span class="folder">主节点3</span></li>
</ul>
</div>
</body>
</html>
3. 问题总结
实现过程中遇到了一个问题：要实现对属性菜单的展开控制该插件要求必须要使用html的a标签。
