实用的多级树形展开菜单

代码
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(http://www.codefans.net/jscss/demoimg/201010/treeico.gif) -4px -31px no-repeat ; }
#root .ren
{ background : url(http://www.codefans.net/jscss/demoimg/201010/treeico.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 >< href ="javascript:;" > 校讯通 a > label >
        
< ul  class ="two" >
            
< li >
                
< label >< href ="javascript:;" > 沈阳市 a > label >
                
< ul  class ="two" >
                    
< li >
                        
< label >< input  type ="checkbox"  value ="123456" >< href ="javascript:;" > 二小 a > label >
                        
< ul  class ="two" >
                            
< li >< label >< input  type ="checkbox"  value ="123456" >< href ="javascript:;" > 二年级 a > label > li >
                            
< li >
                                
< label >< input  type ="checkbox"  value ="123456" >< href ="javascript:;" > 三年级 a > label >
                                
< ul  class ="two" >
                                    
< li >
                                        
< label >< input  type ="checkbox"  value ="123456" >< href ="javascript:;" > 一班 a > label >
                                        
< ul  class ="two" >
                                            
< li >< label >< input  type ="checkbox"  value ="123456" >< href ="javascript:;" > 张三 a > label > li >
                                            
< li >< label >< input  type ="checkbox"  value ="123456" >< href ="javascript:;" > 王五 a > label > li >
                                        
ul >
                                    
li >
                                    
< li >< label >< input  type ="checkbox"  value ="123456" >< href ="javascript:;" > 实验班 a > label > li >
                                
ul >
                            
li >
                        
ul >
                    
li >
                
ul >     
            
li >
            
< li >
                
< label >< href ="javascript:;" > 抚顺市 a > label >
                
< ul  class ="two" >
                    
< li >< label >< input  type ="checkbox"  value ="123456" >< href ="javascript:;" > 二小 a > label > li >
                    
< li >< label >< input  type ="checkbox"  value ="123456" >< href ="javascript:;" > 一中 a > label > 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 < checkbox.length;i ++ )
                            checkbox[i].checked 
=   true ;
                    } 
                }
else {
                    
if (tp){
                        
var  checkbox  =  tp.getElementsByTagName( ' input ' );
                        
for ( var  i = 0 ;i < checkbox.length;i ++ )
                            checkbox[i].checked 
=   false ;
                    }
                }
                parcheck(target,sibcheck(target));
// 当孩子结点取消选中的时候调用该方法递归其父节点的checkbox逐一取消选中
                 break ;
        }
    });
    window.onload 
=   function (){ // 页面加载时给有孩子结点的元素动态添加图标
         var  labels  =  document.getElementById( ' root ' ).getElementsByTagName( ' label ' );
        
for ( var  i = 0 ;i < labels.length;i ++ ){
            
var  span  =  document.createElement( ' span ' );
            span.style.cssText 
= ' display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer; ' ;
            span.innerHTML 
=   '   '
            span.className 
=   ' add ' ;
            
if (nextnode(labels[i].nextSibling) && nextnode(labels[i].nextSibling).nodeName  ==   ' UL ' )
                labels[i].parentNode.insertBefore(span,labels[i]);
            
else
                labels[i].className 
=   ' rem '
        }
    }
script >
body >
html >


转载于:https://www.cnblogs.com/chris-oil/archive/2010/11/01/1866452.html

你可能感兴趣的:(实用的多级树形展开菜单)