7天新手写可折叠菜单
学了7天js，写了一个可折叠菜单：
大家一看就应该知道我要的效果，但是为什么只有第一个菜单生效呢？
1、请大师们指点一下！
2、要实现这样的效果，更好的js写法是怎样的（多注释，新手感激！）？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可折叠菜单</title>
</head>
<body>
<script>
window.onload = menu;
function menu(){
var nav=document.getElementById("nav");
var links=nav.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
if(links[i].className == "ulia"){
links[i].onclick=function(){
var ul=nav.getElementsByTagName("ul");
for(var j=0; j<ul.length; j++){
var ulul=ul[j].getElementsByTagName("ul")[0];
if(ulul.style.display == "block" || ulul.style.display == ""){
ulul.style.display = "none";
}else{
ulul.style.display = "block";
}
}
}
return false;
}
}
}
</script>
<nav id="nav">
<ul>
<li>
<a href="#" class="ulia">AAAAAA</a>
<ul>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaaaa</a></li>
<li><a href="#">aaaaaa</a></li>
</ul>
</li>
<li>
<a href="#" class="ulia">BBBBB</a>
<ul>
<li><a href="#">bbbbbb</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">bbbbbbb</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
function menu(){
var nav=document.getElementById("nav");
var links=nav.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
if(links[i].className == "ulia"){
links[i].onclick=function(){
// 这里应该取当前这个<a>下面的<ul>
// 这个循环完全是没必要的,而且逻辑错误
var ul=nav.getElementsByTagName("ul");
for(var j=0; j<ul.length; j++){
var ulul=ul[j].getElementsByTagName("ul")[0];
if(ulul.style.display == "block"
[解决办法]
ulul.style.display == ""){
ulul.style.display = "none";
}else{
ulul.style.display = "block";
}
}
}
// return false; // 这行应该去掉, 否则只会绑定第1个ulia的事件
}
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>MENU</title>
</head>
<body>
<script>
window.onload = menu;
function menu(){
var nav=document.getElementById("nav");
var links=nav.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
if(links[i].className == "ulia"){
links[i].onclick=function(){
var ul=this.parentNode.getElementsByTagName("ul")[0];
if(ul.style.display == "block"
[解决办法]
ul.style.display == ""){
ul.style.display = "none";
}else{
ul.style.display = "block";
}
}
}
}
}
</script>
<nav id="nav">
<ul>
<li>
<a href="#" class="ulia">AAAAAA</a>
<ul>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaaaa</a></li>
<li><a href="#">aaaaaa</a></li>
</ul>
</li>
<li>
<a href="#" class="ulia">BBBBB</a>
<ul>
<li><a href="#">bbbbbb</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">bbbbbbb</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
