<!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,"");
}