一个简单的js树形菜单

我练习一下，以免不时之需。

树形菜单不过就是把普通菜单重新排列一下，看起来像树形而已。

上图京东的菜单，给他多几个嵌套，然后添加收缩伸展事件，差不多就行了。

给个例子:
复制代码代码如下:
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body{ font-size: 12px;}
h2,h3{ margin: 0;}
ul{ margin: 0; padding: 0; list-style: none; }
#outer_wrap li{ padding-left: 30px; line-height: 24px;}
.controlSymbol{ padding: 0 5px; border: 1px solid #adff2f; cursor: pointer;}
</style>
</head>
<body>
<ul id="outer_wrap">
<li>
<h2>标题1</h2>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>
<h3>标题1_1</h3>
<ul>
<li>内容1_1</li>
<li>内容1_2</li>
<li>内容1_3</li>
<li>内容1_4</li>
</ul>
</li>
<li>
<h3>标题1_2</h3>
<ul>
<li>内容1_1</li>
<li>内容1_2</li>
<li>内容1_3</li>
<li>内容1_4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

然后添加事件：
复制代码代码如下:
var innerText = document.innerText ？ "innerText" : "textContent";
var span = document.createElement（"span"）;
span[innerText] = "-";
span.className = "controlSymbol";

function $（id）{
return document.getElementById（id）;
}
function $_（）{
var args = arguments;
var ret = [];
for（var i = 0; i < args.length; i++）{
var temp = document.getElementsByTagName（args[i]）;
try{
ret = ret.concat（Array.prototype.slice.call（temp,0））;
}catch（e）{
for（var j = 0; j < temp.length; j++）{
ret.push（temp[j]）;
}
}
}
return ret;
}
function addSymbol（h）{
var innerSpan = span.cloneNode（true）;
h.insertBefore（innerSpan,h.firstChild）;
}
function next（el）{
while（el.nextSibling）{
if（el.nextSibling.nodeType == 1）{
return el.nextSibling;
}
el = el.nextSibling;
}
return null;
}
var outerWrap = $（"outer_wrap"）;
var hs = $_（"h2","h3"）;
for（var i = 0 ; i < hs.length; i++）{
addSymbol（hs[i]）;
}
outerWrap.onclick = function（event）{
event = event || window.event;
var t = event.target || event.srcElement;
if（t.className == "controlSymbol"）{
var sn = next（t.parentNode）;
var snStyle = next（t.parentNode）.style;
snStyle.display = （snStyle.display == "block" || snStyle.display == ""）？ "none" : "block";
t[innerText] = t[innerText] == "+" ？ "-":"+";
}
}

不过用的多的可能是动态的添加菜单，也就是动态的生成HTML序列。

一个例子：
复制代码代码如下:
var tree = {
"标题2":[
"内容1",
"内容2",
"内容3",
"内容4",
{"标题2_1":["内容2_1","内容2_2","内容2_3","内容2_4"]},
{"标题2_2":["内容2_1","内容2_2","内容2_3","内容2_4"]},
"内容5"
]
}
var fragment = document.createElement（"ul"）;
function concatTree（tree）{
var array = [];
for（var key in tree）{
array.push（"<li><h3>"）;
array.push（key）;
array.push（"</h3><ul>"）;
for（var i = 0; i < tree[key].length; i++）{
if（tree[key][i].constructor == Object）{
array = array.concat（concatTree（tree[key][i]））;
}else{
array.push（"<li>"）;
array.push（tree[key][i]）;
array.push（"</li>"）;
}
}
array.push（"</ul></li>"）;
}
return array;
}
fragment.innerHTML = concatTree（tree）.join（""）;
$（"outer_wrap"）.appendChild（fragment.firstChild）;

像上面的方法也可以用来生成表格，扯远了，比如
复制代码代码如下:
var oArray = {
thead : ["标题一","标题二","标题三","标题四"],
tbody : [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20],
[21,22,23,24]
],
tfoot : [25,26,27,28]
}
function createTable（arr）{
var html = [];
html.push（"<table>"）;
for（var key in arr）{
html.push（"<"+key + ">"）;
if（key == "thead"）{
assemTag（arr[key],html,"th"）
}else if（key == "tfoot"）{
assemTag（arr[key],html,"td"）
}else if（key == "tbody"）{
for（var k = 0, len_1 = arr[key].length; k < len_1; k++）{
assemTag（arr[key][k],html,"td"）
}
}
html.push（"</"+key + ">"）;
}
html.push（"</table>"）;
var temp = document.createElement（"div"）;
temp.innerHTML = html.join（""）;
return temp.firstChild;
}
function assemTag（array,html,tag）{
html.push（"<tr>"）;
var s = "<" + tag + ">";
var e = "</" + tag + ">";
for（var j = 0, len = array.length; j < len; j++）{
html.push（s）;
html.push（array[j]）;
html.push（e）;
}
html.push（"</tr>"）;
}
document.body.appendChild（createTable（oArray））;

一般可以直接创建一个节点元素，然后直接设置innerHTML，不过innerHTML虽说是IE先搞起的，但是IE又最不彻底，对于table和tr是不可设置innerHTML的（只读），所以只能假div之手了。