一個簡單的js樹形菜單

更新時間：2011年12月09日 00:49:34 作者：

說到樹形菜單，貌似一般是用在一些管理系統(tǒng)里面的，我是還沒有用到過，有些zTree之類的插件已經(jīng)做得比較好了

我練習(xí)一下，以免不時之需。

樹形菜單不過就是把普通菜單重新排列一下，看起來像樹形而已。

上圖京東的菜單，給他多幾個嵌套，然后添加收縮伸展事件，差不多就行了。

給個例子:

復(fù)制代碼代碼如下:

 
<!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>內(nèi)容1</li> 
<li>內(nèi)容2</li> 
<li>內(nèi)容3</li> 
<li>內(nèi)容4</li> 
<li> 
<h3>標題1_1</h3> 
<ul> 
<li>內(nèi)容1_1</li> 
<li>內(nèi)容1_2</li> 
<li>內(nèi)容1_3</li> 
<li>內(nèi)容1_4</li> 
</ul> 
</li> 
<li> 
<h3>標題1_2</h3> 
<ul> 
<li>內(nèi)容1_1</li> 
<li>內(nèi)容1_2</li> 
<li>內(nèi)容1_3</li> 
<li>內(nèi)容1_4</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html> 

然后添加事件：

復(fù)制代碼代碼如下:

 
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] == '+' ? '-':'+'; 
} 
} 

不過用的多的可能是動態(tài)的添加菜單，也就是動態(tài)的生成HTML序列。

一個例子：

復(fù)制代碼代碼如下:

 
var tree = { 
'標題2':[ 
'內(nèi)容1', 
'內(nèi)容2', 
'內(nèi)容3', 
'內(nèi)容4', 
{'標題2_1':['內(nèi)容2_1','內(nèi)容2_2','內(nèi)容2_3','內(nèi)容2_4']}, 
{'標題2_2':['內(nèi)容2_1','內(nèi)容2_2','內(nèi)容2_3','內(nèi)容2_4']}, 
'內(nèi)容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); 

像上面的方法也可以用來生成表格，扯遠了，比如

復(fù)制代碼代碼如下:

 
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)); 