练习要求
1,布局可以随意添加或者删除,只要保证格式完整就可以自适应js代码。
2,每次点击只展开当前菜单,其它菜单如果有展开则全部收回。
3,当前菜单可以点击展开,也可以点击收缩。
4,前面的展开收缩符号要有相应的变化 “+” “-”
HTML代码
<ul id="nav">
<li>
<h2><span>+</span> 第一级菜单 </h2>
<ul>
<li>
<h2><span>+</span> 第二级菜单 </h2>
<ul>
<li>
<h2><span>+</span> 第三级菜单 </h2>
<ul>
<li>
<h2><span>+</span> 第四级菜单 </h2>
<ul>
<li>
<h2><span>+</span>第五级菜单 </h2>
<ul>
<li>
<h2> 第六级菜单 </h2>
</li>
<li>
<h2> 第六级菜单 </h2>
</li>
<li>
<h2> 第六级菜单 </h2>
</li>
<li>
<h2> 第六级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2> 第五级菜单 </h2>
</li>
<li>
<h2> 第五级菜单 </h2>
</li>
<li>
<h2> 第五级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2><span>+</span> 第二级菜单 </h2>
<ul>
<li>
<h2><span>+</span> 第三级菜单 </h2>
<ul>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2> 第二级菜单 </h2>
</li>
<li>
<h2> 第二级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2><span>+</span> 第一级菜单 </h2>
<ul>
<li>
<h2><span>+</span> 第二级菜单 </h2>
<ul>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2><span>+</span> 第二级菜单 </h2>
<ul>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2> 第二级菜单 </h2>
</li>
<li>
<h2> 第二级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2><span>+</span> 第一级菜单 </h2>
<ul>
<li>
<h2><span>+</span> 第二级菜单 </h2>
<ul>
<li>
<h2><span>+</span> 第三级菜单 </h2>
<ul>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2><span>+</span> 第二级菜单 </h2>
<ul>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2> 第二级菜单 </h2>
</li>
<li>
<h2> 第二级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2><span>+</span> 第一级菜单 </h2>
<ul>
<li>
<h2><span>+</span> 第二级菜单 </h2>
<ul>
<li>
<h2><span>+</span> 第三级菜单 </h2>
<ul>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
<li>
<h2> 第四级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2><span>+</span> 第二级菜单 </h2>
<ul>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
<li>
<h2> 第三级菜单 </h2>
</li>
</ul>
</li>
<li>
<h2> 第二级菜单 </h2>
</li>
<li>
<h2> 第二级菜单 </h2>
</li>
</ul>
</li>
</ul>
CSS代码
ul, h2 {margin: 0;padding: 0;}
li {list-style: none;}
#nav {border: 1px solid #333;float: left;padding: 5px 0;background: #ccf;}
#nav ul {padding-left: 20px;display: none;}
#nav h2 {font-size: 16px;height: 25px;line-height: 25px;padding: 0 15px;}
JavaScript代码
var oNav = document.getElementById('nav');
var aH2 = oNav.getElementsByTagName('h2');
for(var i=0; i<aH2.length; i++){
aH2[i].onclick = function(){
var oUl = getNext(this);
var oSpan = getFirst(this);
var oParent = this.parentNode.parentNode;
var aUl = oParent.getElementsByTagName('ul');
var aSpan = oParent.getElementsByTagName('span');
if(oUl){
if(oUl.style.display == 'block'){
oUl.style.display = "none";
oSpan.innerHTML = "+";
}else{
for(var i=0; i<aUl.length; i++){
aUl[i].style.display = 'none';
aSpan[i].innerHTML = "+";
}
oUl.style.display = "block";
oSpan.innerHTML = "-";
}
}
};
}
function getPrev( obj ){
if( !obj || !obj.previousSibling )return null;
return obj.previousSibling.nodeType===1 ? obj.previousSibling : getPrev( obj.previousSibling ); //递归
}
function getNext( obj ){
if( !obj || !obj.nextSibling )return null;
return obj.nextSibling.nodeType===1 ? obj.nextSibling : getNext( obj.nextSibling ); //递归
}
function getFirst( obj ){
if( !obj || !obj.firstChild )return null;
return obj.firstChild.nodeType===1 ? obj.firstChild : getNext( obj.firstChild ); //递归
}
function getLast( obj ){
if( !obj || !obj.lastChild )return null;
return obj.lastChild.nodeType===1 ? obj.lastChild : getPrev( obj.lastChild ); //递归
}