一个简单的JS菜单

最新推荐文章于 2021-09-07 22:37:01 发布

Cathy_forever

最新推荐文章于 2021-09-07 22:37:01 发布

阅读量573

点赞数

分类专栏： javascript 文章标签： JavaScript 函数

本文链接：https://blog.csdn.net/cathy_ha/article/details/9083395

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在看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,'');
	}
}