一个简单的JS菜单

在看jquery源码时看到的一个菜单，将它改写成了JS源码。

HTML代码：<div id="menu" class="nav">
<span>类型一</span>
<div class="detail">
<a href="#">列表一</a>
<a href="#">列表一</a>
<a href="#">列表一</a>
<a href="#">列表一</a>
</div>
<span>类型二</span>
<div class="detail">
<a href="#">列表二</a>
<a href="#">列表二</a>
<a href="#">列表二</a>
<a href="#">列表二</a>
</div>
<span>类型三</span>
<div class="detail">
<a href="#">列表三</a>
<a href="#">列表三</a>
<a href="#">列表三</a>
<a href="#">列表三</a>
</div>
<span>类型四</span>
<div class="detail">
<a href="#">列表四</a>
<a href="#">列表四</a>
<a href="#">列表四</a>
<a href="#">列表四</a>
</div>
</div>CSS代码：

.nav{width:300px;margin:20px auto;overflow:Hidden;}
.nav span{width:300px;margin:0 0 1px;height:24px;line-height:24px;background:#333;display:block;color:#fff;}
.nav .detail{width:280px;padding:4px 10px;overflow:hidden;display:none;background:#CCC;}
.nav .block {display:block;}
.nav .active{background:#9C9;}
.detail a{color:#000;height:24px;line-height:24px;display:block;}

JS代码：

var oMenu = document.getElementById('menu');
var oSpans = getChildren(oMenu,'span');
for(var i=0;i<oSpans.length;i++){
oSpans[i].onclick = showDiv;
}
function showDiv(){
var oDivs = getChildren(oMenu,'div');
var nIndex = getIndex(this);
if(this.className.indexOf('active') == -1){
for(i=0;i<oSpans.length;i++){
removeClass(oSpans[i],'active');
removeClass(oDivs[i],'block');
}
addClass(oSpans[nIndex],'active');
addClass(oDivs[nIndex],'block');
}else{
removeClass(oSpans[nIndex],'active');
removeClass(oDivs[nIndex],'block');
}
}
function getChildren(ele,tagName){
if(ele && ele.nodeType && ele.nodeType == 1){
var a = [];
var childNodes = ele.childNodes;
if(arguments.length == 1){
for(i=0;i<childNodes.length;i++){
if(childNodes[i].nodeType == 1){
a.push(childNodes[i]);
}
}
}else if(arguments.length == 2){
for(var j=0;j<childNodes.length;j++){
if(childNodes[j].nodeType == 1 && childNodes[j].tagName.toUpperCase() == tagName.toUpperCase()){
a.push(childNodes[j]);
}
}
}
return a;
}
}
function getIndex(ele){
if(ele && ele.nodeType && ele.nodeType == 1){
var index = 0;
if(ele.previousElementsibling){
var prev = ele.previousElementsibling;
while(prev){
index ++;
prev = prev.previousElementsibling;
}
}else{
prev = ele.previousSibling;
while(prev){
if(prev.nodeType == 1){
index ++;
}
prev = prev.previousSibling;
}
}
return index/2;
}
}
function addClass(ele,className){
var reg = new RegExp('\\b'+ className +'\\b');
if(reg.test(className)){
ele.className += ' '+ className;
}
}
function removeClass(ele,className){
var reg = new RegExp('\\b'+ className +'\\b');
if(reg.test(className)){
ele.className = ele.className.replace(reg,'');
}
}