欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

一个简单的js树形菜单_javascript技巧

程序员文章站 2022-05-15 21:35:50
...
我练习一下,以免不时之需。

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

一个简单的js树形菜单_javascript技巧

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

给个例子:

复制代码 代码如下:

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

    一般可以直接创建一个节点元素,然后直接设置innerHTML,不过innerHTML虽说是IE先搞起的,但是IE又最不彻底,对于table和tr是不可设置innerHTML的(只读),所以只能假div之手了。
    相关标签: 树形菜单