三级菜单---zhufeng

时间:2024-07-01 13:07:44

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
li{ margin:5px 0; }
</style>

</head>

<body style="background:#ccc;">
<div id="menu" style="width:240px; background:#fff;">
 <ul>
     <li><span>第一级第一个</span></li>
        <li><span>第一级第二个</span>
            <ul>
            <li><span>第二级第一个</span></li>
            <li><span>第二级第二个</span></li>
            <li><span>第二级第三个</span>
             <ul>
                    <li><span>第三级第一个</span></li>
                    <li><span>第三级第二个</span></li>
                    <li><span>第三级第三个</span></li>
                    <li><span>第三级第四个</span></li>
                </ul>
           
            </li>
            <li><span>第二级第四个</span></li>
            </ul>
       
        </li>
        <li><span>第一级第三个</span></li>
        <li><span>第一级第四个</span>
         <ul>
                <li><span>第二级第一个</span></li>
                <li><span>第二级第二个</span></li>
                <li><span>第二级第三个</span></li>
                <li><span>第二级第四个</span></li>
            </ul>
       
        </li>
    </ul>
</div>
</body>
</html>
<script type="text/javascript" src="DOM.js"></script>
<script type="text/ecmascript">
//如果有下一级菜单,则green,如果是终极 blue

var menu=document.getElementById('menu');
var oLis=document.getElementsByTagName('li');

for(var i=0;i<oLis.length;i++){
 var oLi=oLis.item(i);
 var oSpan=DOM.children(oLi,'span')[0];
 var aUl=DOM.children(oLi,'ul');
  if(aUl.length){//为true,表示它有下一级菜单
   aUl[0].style.display="none";   
   oSpan.style.backgroundColor="green";   
  }else{
   oSpan.style.backgroundColor="#09f";
  }
}

menu.onclick=function(e){
 e=e||window.event;
 var t=e.target||e.srcElement;
 if(t.nodeName!='SPAN') return;
 var next=DOM.siblings(t)[0] ;
 //Math
 if(next){
  if(next.style.display=="none"){
   next.style.display="block";
  }else{
   next.style.display="none";
   var oUls=next.getElementsByTagName('ul');
   for(var i=0;i<oUls.length;i++){    
    oUls[i].style.display="none";
   }
  }
 } 
}

</script>

var DOM={};//命名空间,起分类的作用。单例模式
BOM={};

DOM.children=function (parent,nodeName){
 console.log(arguments.callee.caller)//
 var a=[];
 var childNodes=parent.childNodes; 
 for(var i=0;i<childNodes.length;i++){
  var child=childNodes[i];
 if(typeof nodeName=="undefined"&&child.nodeType==1||typeof nodeName=="string"&&child.nodeName==nodeName.toUpperCase()){
  a.push(child)
 }
 }
 return a;
}

DOM.siblings=function (ele){ 
 var a=[]; 
 for(var p=ele.previousSibling;p;p=p.previousSibling){
  if(p.nodeType==1){
   
   a.unshift(p); 
  }  
 } 
 var n=ele.nextSibling;
 while(n){
  if(n.nodeType==1){
   a.push(n);   
  }
  n=n.nextSibling;  
 }
 return a;
}

DOM.getIndex=function(ele){
 var nIndex=0;
 var p=ele.previousSibling;
 while(p){
  if(p.nodeType==1){
   nIndex++
  }
  p=p.previousSibling;
  
 }
 return nIndex;
}

DOM.getElesByClass=function (strClass,context){

function byClassName(strClass,eles){
  var reg=new RegExp("file://b%22+strclass+%22//b");
  var a=[];
  for(var i=0;i<eles.length;i++){
   var ele=eles[i];
   if(reg.test(ele.className)){a.push(ele); } 
  } 
  return a; 
 }

context=context||document;
 if(context.getElementsByClassName){
  return context.getElementsByClassName(strClass); 
  
 }
 strClass=strClass.replace(/^ +| +$/g,"");
 var aClass=strClass.split(/ +/);
 var eles=context.getElementsByTagName("*");  
 for(var i=0;i<aClass.length;i++){  
  eles=byClassName(aClass[i],eles);  
 } 
 return eles; 
}

DOM.addClass=function(ele,strClass){ 
 var reg=new RegExp("file://b%22+strclass+%22//b");
 if(!reg.test(ele.className))
  ele.className+=" "+strClass; 
}
DOM.removeClass=function(ele,strClass){ 
 var reg=new RegExp("file://b%22+strclass+%22//b%22,%22g");
 ele.className=ele.className.replace(reg,"");
}