jquery的一个小问题，希望各位帮忙解决一下

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".glas").hide();
            $(".dd").click(function () {
                $(".glas").not($(this).nextAll()).hide("slow");
                $(this).nextAll().toggle("slow");
            })
        })
    </script>
</head>
<body>
<table width="900" border="1">
  <tr class="dd">
    <td>班级</td>
    
    <td>&nbsp;</td>
  </tr>
 <tr>
 <td><a href="#" class="dd">五年级语文</a></td>
 <td class="glas"><input type="checkbox" name="check" />一班<input type="checkbox" name="check" />二班<input type="checkbox" name="check" />三班</td>
 </tr>
 <td><a href="#">四年级数学</a></td>
 <td class="glas"><input type="checkbox" name="check" />一班<input type="checkbox" name="check" />二班<input type="checkbox" name="check" />三班</td>
 </tr>
</table>
</body>
</html>
我想实现的是，点击五年级语文，他下面的一班，二班，三班都会出现，但是现在不知道哪里错了，求解决
jQueryHTML

解决方案 »

  1.   


    $(function () {
                $(".glas").hide();
                $(".dd").click(function () {
    var parent = $(this).parent(); //this指向a,而你要处理的是td,
                    $(".glas").not($(parent).nextAll()).hide("slow");
                    $(parent).nextAll().toggle("slow");
                })
            })
      

  2.   

    <!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">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".glas").hide();
                $(".dd").click(function () {
                   /* $(".glas").not($(this).nextAll()).hide("slow");
                    $(this).nextAll().toggle("slow");*/

    //$(".glas").show(); 这句只是做到点击五年级语文时，隐藏，没有再点击时，显示出来（你问题描述的就是这个) $(".glas").toggle();//可是按我的理解需求，应该是点击五年级语言时，隐藏，再点击时显示出来(当然这些是在初始状态是显示的条件下)
                })
            })
        </script>
    </head><body>
    <table width="900" border="1">
      <tr class="dd">
        <td>班级</td>
        
        <td>&nbsp;</td>
      </tr>
     <tr>
     <td height="29"><a href="#" class="dd">五年级语文</a></td>
     <td class="glas"><input type="checkbox" name="check" />一班<input type="checkbox" name="check" />二班<input type="checkbox" name="check" />三班</td>
     </tr>
     <td><a href="#">四年级数学</a></td>
     <td class="glas"><input type="checkbox" name="check" />一班<input type="checkbox" name="check" />二班<input type="checkbox" name="check" />三班</td>
     </tr>
    </table>
    </body>
    </html>
      

  3.   

    建议使用div的display属性，初始时设置为block，点击触发事件判断该div的display属性为什么，为block则置位none，为none则置为block，希望可以帮到你
      

  4.   

    多层嵌套尽量少用，toggle()。
    总是出现各种为被设置的效果...
    所以我一般都是先定义好样式，然后
    $(selecter).addClass();
    $(selecter).removeClass();