实用的多级树形展开菜单效果代码
实用的多级树形展开菜单
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;}
- 校讯通
- 沈阳市
- 二小
- 二年级
- 三年级
- 一班
- 张三
- 王五
- 实验班
- 一班
- 二小
- 抚顺市
- 二小
- 一中
- 沈阳市
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
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]