之前写过这个《javascript下拉列表中显示树形菜单的实现方法》菜单的体现，写完之后发现不太合适，高度要精准控制，不太好看。现在我们用表格来包装，我们知道每一行表格写满之后，下一行就会自动添加，比之前我们自己设置的高度好很多。1.单击后，它们都可以共存(只要函数编写不同)。display也是自己设置的，通过父节点操作子节点显示与否；

/*函数open1(node){ //通过父节点操作同级节点。点击后出现，可以直接打开。但是，需要关闭其他varnodes=节点。var nn=nodes . getelementsbytagname(' ul ')[0]；带(nn . style){ display=(display==' block ')？none ' : ' block} } *//脚本2。点击后只允许打开一个，其余必须关闭。

脚本类型=' text/JavaScript '函数list 1(node){//这是获取所有对象(根据表的id)进行的所有操作。//根据这个判断，如果不属于这个，那么关闭//alert(' aa ')；//1、获取被点击对象的值var nodes=node.parentNode//传入当前父节点varnn=nodes . getelementsbytagname(' ul ')[0]；//获取当前对象。如果遍历所有对象，就像这个对象一样，设置相反的情况，关闭所有其他对象。//2，获取所有对象varmm=document . getelementbyid(' menuid ')；var name=mm . getelementsbytagname(' ul ')；//3、开始配对为(var x=0；x names.lengthX) {/*这样写可以简化，用下面的方法if(name[x]==nn){ if(nn。open2') {nn .classname=' close2} else { nn . class name=' open 2 '；} } else { nn . class name=' close 2 '；} */if(name[x]==nnname[x]。类名！=' open 2 '){ nn . class name=' open 2 '；} else { name[x]。className=' close2} } }/编写脚本CSS样式：

style type=' text/CSS ' ul { list-style : none；margin:0pxpadding:0px}表格{ border: # 00ff40 solid 1px}表a { text-decoration : none；}表tr td ul { display:none} . open 2 { display : block；背景技术# 8080ff} . close 2 { display : none；}渲染(只能打开一个):

完整代码：

！DOCTYPE html html head titleqqMenu.html/title样式类型=' text/CSS ' ul { list-style : none；余量：0pxpadding:0px}表格{ border: # 00ff40 solid 1px}表a { text-decoration : none}表tr td ul { display:none}。打开2 {显示：块；背景技术# 8080ff}。关闭2 {显示：无；}/样式脚本类型=' text/JavaScript '/*函数open 1(节点){//通过父节点来操作兄弟节点当点击之后出现之后，直接就能打开但是要求在点开一个时候，其余的都关掉var nodes=node . parent node var nn=nodes。getelementsbytagname(' ul ')[0]；带(nn。style){ display=(display==' block ')？无' : '块} } *//脚本脚本类型='text/javascript '函数列表1(节点){ //这是要对全部操作，必须要得到所有的对象（根据桌子的编号来获得) //根据这判断，不是属于这个，那么就关闭//alert(' aa ')；//1,获得点击对象的值var节点=node.parentNode//传入当前的父节点var nn=节点。getelementsbytagname(' ul ')[0]；//得到当前的对象，要是遍历所有，与这个对象一样，就设置相反的情况，其余的全部关闭//2,获得全部对象var mm=文档。getelementbyid(' menuid ')；var name=mm . getelementsbytagname(' ul ')；//3,开始一一配对for(var x=0；x name . length x){/*这样写，可以简化，利用下面的方法if(name[x]==nn){ if(nn。类名=' open 2 '){ nn。类名=' close 2} else { nn。类名=' open 2} } else { nn。类名=' close 2} */if(name[x]==nnname[x]).类名！=' open 2 '){ nn。类名=' open 2} else { name[x].className=' close2} } }/脚本！- link rel="样式表"类型="text/CSS"href=./style。CSS '-/头体表id=' menuid ' tr TD！-a href=' JavaScript : void(0)' onclick=' open 1(this)'同事栏/a-a href=' JavaScript : void(0)' onclick=' list 1(this)'同事栏/a ul li同事1/李莉同事2/李莉同事3/李莉同事4/li /ul /td /tr tr td！-a href=' JavaScript : void(0)' onclick=' open 1(this)'同学栏/a-a href=' JavaScript : void(0)' onclick=' list 1(this)'同学栏/a ul li同学1/李莉同学2/李莉同学3/李莉同学4/li /ul /td /tr tr td！-a href=' JavaScript : void(0)' onclick=' open 1(this)'黑名单栏/a-a href=' JavaScript : void(0)' onclick=' list 1(this)'黑名单栏/a ul li黑名单同学1/李莉黑名单同学2/李莉黑名单同学3/李莉黑名单同学4/li /ul /td /tr /table /body /html相信大家通过这两篇文章的介绍应该有了大概的思路，小编的这篇文章有些制作的效果略微简陋，大家可以再进一步的完善。