我会练习以备不时之需。树形菜单只是普通菜单的重排，看起来像一棵树。

上图京东的菜单，给他多几个嵌套，然后添加收缩伸展事件，差不多就行了。给个例子：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' body { font-size : 12px；} h2、H3 {保证金： 0；} ul { margin : 0；padd : 0；列表样式：无；} # outer _ wrap Li { padding-left : 30px；线高： 24px} .control symbol { padd : 0 5pxborder : 1 px固体# adff2fcursor:指针；}/style/head body ul id=' outer _ wrap ' Li H2标题1/h2 ul li内容1/李莉内容2/李莉内容3/李莉内容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/ul/body/html然后添加事件：复制代码代码如下： var内部文本=文档。内部文本？inner text ' : ' TextContentVar span=文档。创建元素(“span”)；span[内部文本]='-'；控制符号'；函数$(id){返回文档。getelementbyid(id)；} function $ _(){ var args=args；var ret=[]；for(var I=0；长度；I){ var temp=文档。getelementsbytagname(args[I])；尝试{ ret=ret。concat(数组。原型。切片。调用(temp，0))；} catch(e){ for(var j=0；j温度长度；j){ ret。push(temp[j])；} } }返回ret}函数addSymbol(h){ var内部跨度=跨度。克隆节点(真)；h.insertBefore(innerSpan，h .第一个孩子)；}函数下一个(埃尔){而(埃尔。nextsibling){ if(El。下一个兄弟。nodetype==1){返回El。下一个兄弟姐妹；} El=El。NeXt SibLe}返回null} var外包裹=$(' outer _ wrap ')；var hs=$_('h2 '，' H3 ')；for(var I=0；长度；I){ addSymbol(hs[I])；}外包。onclick=function(event){ event=event | | window。事件；var t=事件。目标| |事件。加速；if(t .类名='控制符号'){ var sn=next(t .父节点)；var snStyle=next(t.parentNode).风格；snstyle。display=(snstyle。display==' block ' | | snstyle。display==' ')？none ' : ' block t[innerText]=t[innerText]===' '？'-':' ';} } 不过用的多的可能是动态的添加菜单，也就是动态的生成超文本标记语言序列。

一个例子：复制代码代码如下： var树={ '标题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。创建元素(' ul ')；函数concat tree(tree){ var array=[]；用于(树中的定义变量键){ array。push(' lih 3 ')；array.push(键);数组。push('/h3ul ')；for(var I=0；我种树[钥匙]。长度；i ){ if(tree[key][i]).构造函数==对象){数组=数组。concat(concat树(tree[key][I])；} else { array。推('李')；数组。推(树[键][I])；数组。推('/Li ')；} }数组。push('/ul/Li ')；}返回数组；}片段。innerHTMl=连环树(Tree).join(' ')；$(“外包裹”).appendChild(片段。第一个孩子)；像上面的方法也可以用来生成表格，扯远了，比如复制代码代码如下： 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] }函数创建表(arr){ var html=[]；html。push(' table ')；for(arr中的var键){ html。按下('键' ')；if(key==' the ad '){ assembly tag(arr[key]，html，' th ')} else if(key==' tfoot '){ assembly tag(arr[key]，html，' TD ')} else if(key==' t body '){ for(var k=0，len_1=arr[key]).长度；k len _ 1；k){ assembly tag(arr[key][k]，html，' TD ')} } html。push('/' key ' ')；} html。push('/table ')；var temp=文档。创建元素(' div ')；在…之时innerHTMl=HTMl。join(')；返回temp.firstChild}函数程序集标记(数组、html、标记){ html。push(' tr ')；var s=" "标记"";var e='/'标记"";for(var j=0，len=array . lenjj lenj){ html。推送；html。push(array[j])；html。push(e)；} html。push('/tr ')；}文档。尸体。appendchild(创建表(oArray))；一般可以直接创建一个节点元素，然后直接设置innerHTML，不过innerHTML虽说是工业管理学(工业工程)先搞起的，但是工业管理学(工业工程)又最不彻底，对于桌子和tr是不可设置innerHTML的（只读),所以只能假差异之手了。