【前端实例】JavaScript原生实现二级导航

1、效果

2、代码

【HTML代码】
<li class="navList">
	<div class="navHead">
		<i class="navIcon">&#xec1d;</i>
		<span>一级导航</span>
	</div>
	<dd class="navChild">
		<dl class="navItem">二级导航</dl>
		<dl class="navItem">二级导航</dl>
		<dl class="navItem">二级导航</dl>
	</dd>
</li>

【JavaScript代码】
function navEvent(){
	var classList,parentNode;
	var navHead = document.getElementsByClassName("navHead");
	for(i=0;i<navHead.length;i++){
		navHead[i].onclick = function(){
			// 判断当前是否是展开状态，如果不是则添加navActive选中类名；如果是隐藏子导航容器
			parentNode = this.parentNode;
			classList = parentNode.className.indexOf("navActive");
			if(classList > -1){
				parentNode.className = parentNode.className.replace(" navActive","");
			}else{
				parentNode.className = parentNode.className + " navActive";
			}
		}
	}
}