资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
实用的多级树形展开菜单效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>实用的多级树形展开菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} ul,li,{margin:0;padding:0;} ul{list-style:none;} #root{margin:10px;width:200px;overflow:hidden;} #root li{line-height:25px;} #root .rem{padding-left:16px;} #root .add{background:url(/upload/201010/20101031213041133.gif) -4px -31px no-repeat;} #root .ren{background:url(/upload/201010/20101031213041133.gif) -4px -7px no-repeat;} #root li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());} #root li input{vertical-align:middle;margin-left:5px;} #root .two{padding-left:20px;display:none;} </style> </head> <body> <ul id="root"> <li> <label><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">校讯通</a></label> <ul class="two"> <li> <label><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">沈阳市</a></label> <ul class="two"> <li> <label><input type="checkbox" value="123456"><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">二小</a></label> <ul class="two"> <li><label><input type="checkbox" value="123456"><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">二年级</a></label></li> <li> <label><input type="checkbox" value="123456"><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">三年级</a></label> <ul class="two"> <li> <label><input type="checkbox" value="123456"><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">一班</a></label> <ul class="two"> <li><label><input type="checkbox" value="123456"><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">张三</a></label></li> <li><label><input type="checkbox" value="123456"><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">王五</a></label></li> </ul> </li> <li><label><input type="checkbox" value="123456"><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">实验班</a></label></li> </ul> </li> </ul> </li> </ul> </li> <li> <label><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">抚顺市</a></label> <ul class="two"> <li><label><input type="checkbox" value="123456"><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">二小</a></label></li> <li><label><input type="checkbox" value="123456"><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">一中</a></label></li> </ul> </li> </ul> </li> </ul> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20%3E%20%0D%0Afunction%20addEvent(el%2Cname%2Cfn)%7B%2F%2F%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6%20%0D%0Aif(el.addEventListener)%20return%20el.addEventListener(name%2Cfn%2Cfalse)%3B%20%0D%0Areturn%20el.attachEvent('on'%2Bname%2Cfn)%3B%20%0D%0A%7D%20%0D%0Afunction%20nextnode(node)%7B%2F%2F%E5%AF%BB%E6%89%BE%E4%B8%8B%E4%B8%80%E4%B8%AA%E5%85%84%E5%BC%9F%E5%B9%B6%E5%89%94%E9%99%A4%E7%A9%BA%E7%9A%84%E6%96%87%E6%9C%AC%E8%8A%82%E7%82%B9%20%0D%0Aif(!node)return%20%3B%20%0D%0Aif(node.nodeType%20%3D%3D%201)%20%0D%0Areturn%20node%3B%20%0D%0Aif(node.nextSibling)%20%0D%0Areturn%20nextnode(node.nextSibling)%3B%20%0D%0A%7D%20%0D%0Afunction%20prevnode(node)%7B%2F%2F%E5%AF%BB%E6%89%BE%E4%B8%8A%E4%B8%80%E4%B8%AA%E5%85%84%E5%BC%9F%E5%B9%B6%E5%89%94%E9%99%A4%E7%A9%BA%E7%9A%84%E6%96%87%E6%9C%AC%E8%8A%82%E7%82%B9%20%0D%0Aif(!node)return%20%3B%20%0D%0Aif(node.nodeType%20%3D%3D%201)%20%0D%0Areturn%20node%3B%20%0D%0Aif(node.previousSibling)%20%0D%0Areturn%20prevnode(node.previousSibling)%3B%20%0D%0A%7D%20%0D%0Afunction%20parcheck(self%2Cchecked)%7B%2F%2F%E9%80%92%E5%BD%92%E5%AF%BB%E6%89%BE%E7%88%B6%E4%BA%B2%E5%85%83%E7%B4%A0%EF%BC%8C%E5%B9%B6%E6%89%BE%E5%88%B0input%E5%85%83%E7%B4%A0%E8%BF%9B%E8%A1%8C%E6%93%8D%E4%BD%9C%20%0D%0Avar%20par%20%3D%20prevnode(self.parentNode.parentNode.parentNode.previousSibling)%2Cparspar%3B%20%0D%0Aif(par%26%26par.getElementsByTagName('input')%5B0%5D)%7B%20%0D%0Apar.getElementsByTagName('input')%5B0%5D.checked%20%3D%20checked%3B%20%0D%0Aparcheck(par.getElementsByTagName('input')%5B0%5D%2Csibcheck(par.getElementsByTagName('input')%5B0%5D))%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20sibcheck(self)%7B%2F%2F%E5%88%A4%E6%96%AD%E5%85%84%E5%BC%9F%E8%8A%82%E7%82%B9%E6%98%AF%E5%90%A6%E5%B7%B2%E7%BB%8F%E5%85%A8%E9%83%A8%E9%80%89%E4%B8%AD%20%0D%0Avar%20sbi%20%3D%20self.parentNode.parentNode.parentNode.childNodes%2Cn%3D0%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Csbi.length%3Bi%2B%2B)%7B%20%0D%0Aif(sbi%5Bi%5D.nodeType%20!%3D%201)%2F%2F%E7%94%B1%E4%BA%8E%E5%AD%A9%E5%AD%90%E7%BB%93%E7%82%B9%E4%B8%AD%E5%8C%85%E6%8B%AC%E7%A9%BA%E7%9A%84%E6%96%87%E6%9C%AC%E8%8A%82%E7%82%B9%EF%BC%8C%E6%89%80%E4%BB%A5%E8%BF%99%E9%87%8C%E7%B4%AF%E8%AE%A1%E9%95%BF%E5%BA%A6%E7%9A%84%E6%97%B6%E5%80%99%E4%B9%9F%E8%A6%81%E7%AE%97%E4%B8%8A%E5%8E%BB%20%0D%0An%2B%2B%3B%20%0D%0Aelse%20if(sbi%5Bi%5D.getElementsByTagName('input')%5B0%5D.checked)%20%0D%0An%2B%2B%3B%20%0D%0A%7D%20%0D%0Areturn%20n%3D%3Dsbi.length%3Ftrue%3Afalse%3B%20%0D%0A%7D%20%0D%0AaddEvent(document.getElementById('root')%2C'click'%2Cfunction(e)%7B%2F%2F%E7%BB%91%E5%AE%9Ainput%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%EF%BC%8C%E4%BD%BF%E7%94%A8root%E6%A0%B9%E5%85%83%E7%B4%A0%E4%BB%A3%E7%90%86%20%0D%0Ae%20%3D%20e%7C%7Cwindow.event%3B%20%0D%0Avar%20target%20%3D%20e.target%7C%7Ce.srcElement%3B%20%0D%0Avar%20tp%20%3D%20nextnode(target.parentNode.nextSibling)%3B%20%0D%0Aswitch(target.nodeName)%7B%20%0D%0Acase%20'A'%3A%2F%2F%E7%82%B9%E5%87%BBA%E6%A0%87%E7%AD%BE%E5%B1%95%E5%BC%80%E5%92%8C%E6%94%B6%E7%BC%A9%E6%A0%91%E5%BD%A2%E7%9B%AE%E5%BD%95%EF%BC%8C%E5%B9%B6%E6%94%B9%E5%8F%98%E5%85%B6%E6%A0%B7%E5%BC%8F%E4%BC%9A%E9%80%89%E4%B8%ADcheckbox%20%0D%0Aif(tp%26%26tp.nodeName%20%3D%3D%20'UL')%7B%20%0D%0Aif(tp.style.display%20!%3D%20'block'%20)%7B%20%0D%0Atp.style.display%20%3D%20'block'%3B%20%0D%0Aprevnode(target.parentNode.previousSibling).className%20%3D%20'ren'%20%0D%0A%7Delse%7B%20%0D%0Atp.style.display%20%3D%20'none'%3B%20%0D%0Aprevnode(target.parentNode.previousSibling).className%20%3D%20'add'%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Abreak%3B%20%0D%0Acase%20'SPAN'%3A%2F%2F%E7%82%B9%E5%87%BB%E5%9B%BE%E6%A0%87%E5%8F%AA%E5%B1%95%E5%BC%80%E6%88%96%E8%80%85%E6%94%B6%E7%BC%A9%20%0D%0Avar%20ap%20%3D%20nextnode(nextnode(target.nextSibling).nextSibling)%3B%20%0D%0Aif(ap.style.display%20!%3D%20'block'%20)%7B%20%0D%0Aap.style.display%20%3D%20'block'%3B%20%0D%0Atarget.className%20%3D%20'ren'%20%0D%0A%7Delse%7B%20%0D%0Aap.style.display%20%3D%20'none'%3B%20%0D%0Atarget.className%20%3D%20'add'%20%0D%0A%7D%20%0D%0Abreak%3B%20%0D%0Acase%20'INPUT'%3A%2F%2F%E7%82%B9%E5%87%BBcheckbox%EF%BC%8C%E7%88%B6%E4%BA%B2%E5%85%83%E7%B4%A0%E9%80%89%E4%B8%AD%EF%BC%8C%E5%88%99%E5%AD%A9%E5%AD%90%E8%8A%82%E7%82%B9%E4%B8%AD%E7%9A%84checkbox%E4%B9%9F%E5%90%8C%E6%97%B6%E9%80%89%E4%B8%AD%EF%BC%8C%E5%AD%A9%E5%AD%90%E7%BB%93%E7%82%B9%E5%8F%96%E6%B6%88%E7%88%B6%E5%85%83%E7%B4%A0%E9%9A%8F%E4%B9%8B%E5%8F%96%E6%B6%88%20%0D%0Aif(target.checked)%7B%20%0D%0Aif(tp)%7B%20%0D%0Avar%20checkbox%20%3D%20tp.getElementsByTagName('input')%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Ccheckbox.length%3Bi%2B%2B)%20%0D%0Acheckbox%5Bi%5D.checked%20%3D%20true%3B%20%0D%0A%7D%20%0D%0A%7Delse%7B%20%0D%0Aif(tp)%7B%20%0D%0Avar%20checkbox%20%3D%20tp.getElementsByTagName('input')%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Ccheckbox.length%3Bi%2B%2B)%20%0D%0Acheckbox%5Bi%5D.checked%20%3D%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aparcheck(target%2Csibcheck(target))%3B%2F%2F%E5%BD%93%E5%AD%A9%E5%AD%90%E7%BB%93%E7%82%B9%E5%8F%96%E6%B6%88%E9%80%89%E4%B8%AD%E7%9A%84%E6%97%B6%E5%80%99%E8%B0%83%E7%94%A8%E8%AF%A5%E6%96%B9%E6%B3%95%E9%80%92%E5%BD%92%E5%85%B6%E7%88%B6%E8%8A%82%E7%82%B9%E7%9A%84checkbox%E9%80%90%E4%B8%80%E5%8F%96%E6%B6%88%E9%80%89%E4%B8%AD%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D)%3B%20%0D%0Awindow.onload%20%3D%20function()%7B%2F%2F%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E6%97%B6%E7%BB%99%E6%9C%89%E5%AD%A9%E5%AD%90%E7%BB%93%E7%82%B9%E7%9A%84%E5%85%83%E7%B4%A0%E5%8A%A8%E6%80%81%E6%B7%BB%E5%8A%A0%E5%9B%BE%E6%A0%87%20%0D%0Avar%20labels%20%3D%20document.getElementById('root').getElementsByTagName('label')%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Clabels.length%3Bi%2B%2B)%7B%20%0D%0Avar%20span%20%3D%20document.createElement('span')%3B%20%0D%0Aspan.style.cssText%20%3D'display%3Ainline-block%3Bheight%3A18px%3Bvertical-align%3Amiddle%3Bwidth%3A16px%3Bcursor%3Apointer%3B'%3B%20%0D%0Aspan.innerHTML%20%3D%20'%20'%20%0D%0Aspan.className%20%3D%20'add'%3B%20%0D%0Aif(nextnode(labels%5Bi%5D.nextSibling)%26%26nextnode(labels%5Bi%5D.nextSibling).nodeName%20%3D%3D%20'UL')%20%0D%0Alabels%5Bi%5D.parentNode.insertBefore(span%2Clabels%5Bi%5D)%3B%20%0D%0Aelse%20%0D%0Alabels%5Bi%5D.className%20%3D%20'rem'%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程