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>

解决方案 »

  1.   

    为什么只能第一组<li></li>可以折叠, 我调整了一下菜单的顺序，没有改动  var links=nav.getElementsByTagName("a");
    错误依旧，
    <nav id="nav">
      <ul>
        <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>
        <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>  </ul>  
    </nav>
      

  2.   

    window.onload = menu;
    function menu(){
        var nav=document.getElementById("nav");
        var links=nav.getElementsByTagName("a");
        for(var i=0 , k = 0; i<links.length; i++){
            if(links[i].className == "ulia"){
                links[i].onclick=function(_k){
                    return function(){
                        var ul=nav.getElementsByTagName("ul");
                        for(var j=0; j<ul.length; j++){
                            var ulul=ul[j].getElementsByTagName("ul")[_k];
                            if(ulul.style.display == "block" || ulul.style.display == ""){
                                ulul.style.display = "none";
                            }else{
                                ulul.style.display = "block";
                            }
                        }
                    }
                    
                }(k);
                ++k;            
            }
        }
    }
      

  3.   

    以上的方法不好，首先你的第一个for循环应该循环了8次，其次onclick每次也会循环2次！所以说你的代码逻辑是有问题的！
      

  4.   


    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>
      

  5.   

    this.parentNode 是取当前节点的父节点, 即<a>的父节点<li>
      

  6.   

    <ul id="nav">
        <li>
            <a href="#">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="#">BBBBB</a>
            <ul>
                <li><a href="#">bbbbbb</a></li>
                <li><a href="#">bbb</a></li>
                <li><a href="#">bbbbbbb</a></li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript">
        window.onload = menu;
        function menu(){
            var nav=document.getElementById("nav");
            var li=nav.getElementsByTagName("li");
            for(var i=0; i<li.length; i++){
                li[i].onclick=function(){
                    var ul=this.getElementsByTagName("ul")[0];//使用this避免使用闭包
                    if(ul.style.display == "none"){
                        ul.style.display = "block";
                    }else{
                        ul.style.display = "none";
                    }
                }
            }
        }
        //不建议查class，a本身有链接行为，应该点li来控制菜单，结构应该尽量简单。
    </script>
      

  7.   

    楼上的朋友，修改后，第二组<li></li>可以折叠了，但收缩后还是有问题，请看一下
      

  8.   

    不会呀，ie8/firefox/360都通过测试
      

  9.   

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>可折叠菜单</title>
    </head>
     
    <body>
    <script>
    function aaa(a)
    {
          var li = a.parentNode;
          var ul = li.getElementsByTagName("ul");
          if(ul[0].style.display == "none"){
                ul[0].style.display = "block";
          }
          else{
                ul[0].style.display = "none";
          }
    }
    </script>
    <nav id="nav">
      <ul>
        <li>
          <a onclick="aaa(this)" 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 onclick="aaa(this)" 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> 这样写比较简单点，只是折叠的话循环没必要的
      

  10.   

    不管从哪个角度来讲，我觉得都没必要通过循环来绑定方法。我还是建议直接添加onclick事件
      

  11.   

    这么多人参与进来，真正见证了CSDN这个名字
      

  12.   

    哪位好心人帮忙回答一下我的问题，困扰很久. thankshttp://bbs.csdn.net/topics/390376795?page=1#post-393774928