昨天写一个界面的时候需要实现一个树型结构菜单，因为之前没写过，所以就将自己的过程记录下来了：
先写一个静态的dom结构
html代码如下：
<ul class="menu">
<li>
<a href="#">1</a>
<ul class="menu1">
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
<li>
<a href="#">1.3</a>
<ul class="menu2">
<li><a href="#">1.3.1.1</a></li>
<li><a href="#">1.3.1.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
那么我的实现效果如下：
设置点击事件
先将下拉的元素隐藏，然后当我点击的时候将它隐藏和显示切换，用jQuery几行代码就实现啦
js代码如下：
$(function () {
$(".menu ul").css("display", "none");
$(".menu a").on("click", function () {
$(this).next().toggle();
});
});
那么此时我的效果如下：
点击之后效果如下：
（忽略我懒得弄个动图上来，捂脸，捂脸，捂脸）
将自己的json数据放进去
此时你就可以将之前的html文件中的静态数据删除，然后我们在js文件中动态去生成，那么我的html文件就只剩一个div：
<div id="div">
</div>
此时我的js文件的代码如下：
function renderMenu(menu, parent) {
var el = $('<a href="#">' + menu.name + '</a>');
parent.append(el);
if (!menu.hasOwnProperty("contents")) { //判断是否是叶子节点，根据自己的数据去判断
return parent;
}
var ul = $('<ul/>');
for (var i = 0; i < menu.contents.length; ++i) {
var li = $('<li/>');
renderMenu(menu.contents[i], li);
ul.append(li);
}
parent.append(ul);
return parent;
}
function render(data) {
var div = $('<div/>');
return renderMenu(data, div);
}
$(function () {
var data = {
"type": "directory", "name": "haha", "contents": [
{"type": "file", "name": "2848"},
{
"type": "directory", "name": "_2848.extracted", "contents": [
{"type": "file", "name": "3A03FC.xz"}
]
}]
}; //你自己的json数据
var menu = render(data);
$("#div").append(menu);
$("#div ul").css("display", "none");
$("#div a").on("click", function () {
$(this).next().toggle();
});
});
那么此时你自己的数据就生成树型结构菜单啦：
样式丑了点，根据个人喜好去调样式哦
