一个简单的js树形菜单_javascript技巧-JS Tutorial-php.cn

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

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

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

给个例子:

复制代码代码如下:

        
BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
标题1

内容1

内容2

内容3

内容4

标题1_1

内容1_1

内容1_2

内容1_3

内容1_4

标题1_2

内容1_1

内容1_2

内容1_3

内容1_4

然后添加事件：

复制代码代码如下:

        
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 var temp = document.getElementsByTagName(args[i]);
        
try{
        
ret = ret.concat(Array.prototype.slice.call(temp,0));
        
}catch(e){
        
for(var j = 0; 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 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('
        ');
array.push(key);
array.push('
         
          ');
          
for(var i = 0; i if(tree[key][i].constructor == Object){
          
array = array.concat(concatTree(tree[key][i]));
          
}else{
          
array.push('
          ');
array.push(tree[key][i]);
array.push('
');
          
}
          
}
          
array.push('
         
');
        
}
        
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('
        
         ');for(var key in arr){html.push('');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 assemTag(arr[key][k],html,'td')}}html.push(''+key + '>');}html.push('
        ');
        
var temp = document.createElement('div');
        
temp.innerHTML = html.join('');
        
return temp.firstChild;
        
}
        
function assemTag(array,html,tag){
        
html.push('');
        
var s = '';
        
var e = '' + tag + '>';
        
for(var j = 0, len = array.length; j html.push(s);
        
html.push(array[j]);
        
html.push(e);
        
}
        
html.push('');
        
}
        
document.body.appendChild(createTable(oArray));