教程集 > 脚本编程 > javascript > 正文 javascript多级树形展开菜单特效代码

javascript多级树形展开菜单特效代码

发布时间：2016-10-14 编辑：jiaochengji.com

教程集为您提供javascript多级树形展开菜单特效代码等资源，欢迎您收藏本站，我们将为您提供最新的javascript多级树形展开菜单特效代码资源

我们以前介绍过很多不同种类的多级树形展开菜单效果，本文章来给各位同学介绍一个三级展开菜单效果，有需要了解学习的同学可进入参考。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascript多级树形展开菜单特效代码</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(img/201106/arr_menu.gif) -4px -31px no-repeat; } #root .ren { background:url(img/201106/arr_menu.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> 校讯通 <ul class="two"> <li> 沈阳市 <ul class="two"> <li> 二小 <ul class="two"> <li> 二年级 </li> <li> 三年级 <ul class="two"> <li> 一班 <ul class="two"> <li> 张三 </li> <li> 王五 </li> </ul> </li> <li> 实验班 </li> </ul> </li> </ul> </li> </ul> </li> <li> 抚顺市 <ul class="two"> <li> 二小 </li> <li> 一中 </li> </ul> </li> </ul> </li> </ul> <script type="text/javascript" > function addEvent(el,name,fn){//绑定事件 if(el.addEventListener) return el.addEventListener(name,fn,false); return el.attachEvent('on' name,fn); } function nextnode(node){//寻找下一个兄弟并剔除空的文本节点 if(!node)return ; if(node.nodeType == 1) return node; if(node.nextSibling) return nextnode(node.nextSibling); } function prevnode(node){//寻找上一个兄弟并剔除空的文本节点 if(!node)return ; if(node.nodeType == 1) return node; if(node.previousSibling) return prevnode(node.previousSibling); } function parcheck(self,checked){//递归寻找父亲元素，并找到input元素进行操作 var par = prevnode(self.parentNode.parentNode.parentNode.previousSibling),parspar; if(par&&par.getElementsByTagName('input')[0]){ par.getElementsByTagName('input')[0].checked = checked; parcheck(par.getElementsByTagName('input')[0],sibcheck(par.getElementsByTagName('input')[0])); } } function sibcheck(self){//判断兄弟节点是否已经全部选中 var sbi = self.parentNode.parentNode.parentNode.childNodes,n=0; for(var i=0;i<sbi.length;i ){ if(sbi[i].nodeType != 1)//由于孩子结点中包括空的文本节点，所以这里累计长度的时候也要算上去 n ; else if(sbi[i].getElementsByTagName('input')[0].checked) n ; } return n==sbi.length?true:false; } addEvent(document.getElementById('root'),'click',function(e){//绑定input点击事件，使用root根元素代理 e = e||window.event; var target = e.target||e.srcElement; var tp = nextnode(target.parentNode.nextSibling); switch(target.nodeName){ case 'A'://点击A标签展开和收缩树形目录，并改变其样式会选中checkbox if(tp&&tp.nodeName == 'UL'){ if(tp.style.display != 'block' ){ tp.style.display = 'block'; prevnode(target.parentNode.previousSibling).className = 'ren' }else{ tp.style.display = 'none'; prevnode(target.parentNode.previousSibling).className = 'add' } } break; case 'SPAN'://点击图标只展开或者收缩 var ap = nextnode(nextnode(target.nextSibling).nextSibling); if(ap.style.display != 'block' ){ ap.style.display = 'block'; target.className = 'ren' }else{ ap.style.display = 'none'; target.className = 'add' } break; case 'INPUT'://点击checkbox，父亲元素选中，则孩子节点中的checkbox也同时选中，孩子结点取消父元素随之取消 if(target.checked){ if(tp){ var checkbox = tp.getElementsByTagName('input'); for(var i=0;i

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
导航菜单-左则多层树形下拉菜单
 jQuery多层级树形菜单 NotesForMenu
jquery 树形菜单代码一例(图文)
javascript多级树形展开菜单特效代码
 jQuery菜单插件 Smooth Navigational Menu
js 实用的多级树形展开菜单特效
 php mysql js实现树形菜单代码
 php与js制作的无限级可伸缩菜单
 js 树状菜单
 Javascript无限级树形菜单实例

上一篇：JavaScript算法题之–随机数的生成下一篇：jQuery版TAB选项卡效果代码

[关闭]

javascript多级树形展开菜单特效代码

最近更新

浏览排行