JS显示隐藏脚本

<div class="biao">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
</ul>
<ul> //行1
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
</ul>
<ul style="display:none;"> //隐藏行1
<li>11110</li>
<li>22220</li>
<li>33330</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
</ul>
<ul> //行2
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
</ul>
<ul style="display:none;"> //隐藏行2
<li>11110</li>
<li>22220</li>
<li>33330</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
</ul>
</div>以上是DIV表格，每一行都有8列，现在想要如下效果：
点击行1，隐藏行1显示，再点击行1，隐藏行1隐藏
点击行2，隐藏行2显示，再点击行2，隐藏行2隐藏
……需要一个JS脚本，可修改我发的源码，谢谢。

解决方案 »

  1.   

    首先你最好定义2个class
    普通行定义一个，需要隐藏行定义一个
    <div class="biao">
    <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul class="or"> //行1
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul class="sp" style="display:none;"> //隐藏行1
    <li>11110</li>
    <li>22220</li>
    <li>33330</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul> //行2
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul style="display:none;"> //隐藏行2
    <li>11110</li>
    <li>22220</li>
    <li>33330</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    </div>如果是jquery
    $(".or").toggle(function() {
       $(this).next(".sp").show();
    },function() {
       $(this).next(".sp").hide();
    });
      

  2.   

    说明一下，希望这个脚本，不要用ID排列，因为这个源码的结构是有很多行表格，ID不可能排列下去的。
      

  3.   

    <script>
    window.onload=function(){
        var ul=document.getElementsByTagName("ul"); 
        for(var i=0;i<ul.length;i++){
            if(ul[i].style.display==""){
                ul[i].onclick=function(){
                    if(this.nextSibling.style.display=="none")
                        this.nextSibling.style.display="block";
                    else
                        this.nextSibling.style.display="none";
                };
            }
        }
    }
    </script>
    <div class="biao">
    <ul> //行1
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul style="display:none;"> //隐藏行1
    <li>11110</li>
    <li>22220</li>
    <li>33330</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul> //行2
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul style="display:none;"> //隐藏行2
    <li>11110</li>
    <li>22220</li>
    <li>33330</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul> //行3
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul style="display:none;"> //隐藏行3
    <li>11110</li>
    <li>22220</li>
    <li>33330</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    </div>
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <style>
    .test{
    margin-left:10px;
    }
    </style>
    <script src="jquery-1.3.2.js"></script>
    <script>
    $(function(){
    $("ul:odd").toggle(function(){
         $(this).next().show();
    },function(){
    $(this).next().hide();
    });
    });
    </script>
    </head><body>
    <div class="biao">
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>5555</li>
            <li>6666</li>
            <li>7777</li>
            <li>8888</li>
        </ul>
        <ul> 
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>5555</li>
            <li>6666</li>
            <li>7777</li>
            <li>8888</li>
        </ul>
        <ul style="display:none;"> 
            <li>11110</li>
            <li>22220</li>
            <li>33330</li>
            <li>4444</li>
            <li>5555</li>
            <li>6666</li>
            <li>7777</li>
            <li>8888</li>
        </ul>
        <ul> 
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>5555</li>
            <li>6666</li>
            <li>7777</li>
            <li>8888</li>
        </ul>
        <ul style="display:none;">
            <li>11110</li>
            <li>22220</li>
            <li>33330</li>
            <li>4444</li>
            <li>5555</li>
            <li>6666</li>
            <li>7777</li>
            <li>8888</li>
        </ul>
    </div>
    </body>
    </html>jquery非常的简单
      

  5.   

    补充下3#的一点点问题
    window.onload=function(){
        var ul=document.getElementsByTagName("ul"); 
        for(var i=0;i<ul.length;i++){
            if(ul[i].style.display==""){
                ul[i].onclick=function(){
                    do{
                       this.nextSibling = this.nextSibling.nextSibling;
                    } while(this.nextSibling && this.nextSibling.nodeType != 1) ;
                    if(this.nextSibling.style.display=="none")
                        this.nextSibling.style.display="block";
                    else
                        this.nextSibling.style.display="none";
                };
            }
        }
    }
      

  6.   

    <div class="biao">
    <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul onclick="showhide(1)"> //行1
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul style="display:none;" id="ul1"> //隐藏行1
    <li>11110</li>
    <li>22220</li>
    <li>33330</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul onclick="showhide(2)"> //行2
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul style="display:none;" id="ul2"> //隐藏行2
    <li>11110</li>
    <li>22220</li>
    <li>33330</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    </div>
    <script>
    function showhide(id)
    {
    var a=document.getElementById("ul"+id);
    if(a.style.display=="none")
    {
    a.style.display="";
    }
    else
    {
    a.style.display="none";
    }
    }
    </script>
      

  7.   

    改一下：
    <script>
    window.onload=function(){
        var ul=document.getElementsByTagName("ul"); 
        
        for(var i=0;i<ul.length;i++){
            if(ul[i].childNodes.length==9 && ul[i].style.display==""){
                ul[i].onclick=function(){
                    if(this.nextSibling.style.display=="none")
                        this.nextSibling.style.display="block";
                    else
                        this.nextSibling.style.display="none";
                };
            }
        }
    }
    </script>
    <div class="biao">
    <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul> //行1
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul style="display:none;"> //隐藏行1
    <li>11110</li>
    <li>22220</li>
    <li>33330</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul> //行2
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    <ul style="display:none;"> //隐藏行2
    <li>11110</li>
    <li>22220</li>
    <li>33330</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
    <li>7777</li>
    <li>8888</li>
    </ul>
    </div>