昨天寫一個(gè)界面的時(shí)候需要實(shí)現(xiàn)一個(gè)樹型結(jié)構(gòu)菜單，因?yàn)橹皼]寫過卦停，所以就將自己的過程記錄下來了：
先寫一個(gè)靜態(tài)的dom結(jié)構(gòu)
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>
那么我的實(shí)現(xiàn)效果如下：
設(shè)置點(diǎn)擊事件
先將下拉的元素隱藏，然后當(dāng)我點(diǎn)擊的時(shí)候?qū)⑺[藏和顯示切換懂昂，用jQuery幾行代碼就實(shí)現(xiàn)啦
js代碼如下：
$(function () {
$(".menu ul").css("display", "none");
$(".menu a").on("click", function () {
$(this).next().toggle();
});
});
那么此時(shí)我的效果如下：
點(diǎn)擊之后效果如下：
（忽略我懶得弄個(gè)動(dòng)圖上來祟牲，捂臉，捂臉起意，捂臉）
將自己的json數(shù)據(jù)放進(jìn)去
此時(shí)你就可以將之前的html文件中的靜態(tài)數(shù)據(jù)刪除，然后我們?cè)趈s文件中動(dòng)態(tài)去生成病瞳，那么我的html文件就只剩一個(gè)div：
<div id="div">
</div>
此時(shí)我的js文件的代碼如下：
function renderMenu(menu, parent) {
var el = $('<a href="#">' + menu.name + '</a>');
parent.append(el);
if (!menu.hasOwnProperty("contents")) { //判斷是否是葉子節(jié)點(diǎn)揽咕，根據(jù)自己的數(shù)據(jù)去判斷
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數(shù)據(jù)
var menu = render(data);
$("#div").append(menu);
$("#div ul").css("display", "none");
$("#div a").on("click", function () {
$(this).next().toggle();
});
});
那么此時(shí)你自己的數(shù)據(jù)就生成樹型結(jié)構(gòu)菜單啦：
樣式丑了點(diǎn)悲酷，根據(jù)個(gè)人喜好去調(diào)樣式哦
