一个jq点击隐藏显示的问题!

Question

javascripthtmljquery

Answer 1

 
        <table><tr class="id">
            <td style="text-align:center">{$vo.id}</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">111111</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">222222</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">333333</td>
        </tr>
        <!--循环结束-->
        <!--循环开始    N个这样的循环-->
        <tr class="id">
            <td style="text-align:center">{$vo.id}</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">111111</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">222222</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">333333</td>
        </tr></table>
        
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    $(function () {
        $('tr.id').click(function () { $('tr.test').hide(); $(this).nextUntil('.id').show() });
    });
</script>

Answer 2

试试
 <table><tr class="id">
            <td style="text-align:center">{$vo.id}</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">111111</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">222222</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">333333</td>
        </tr>
        <!--循环结束-->
        <!--循环开始    N个这样的循环-->
        <tr class="id">
            <td style="text-align:center">{$vo.id}</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">111111</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">222222</td>
        </tr>
        <tr class="test" style="display:none;">
            <td style="text-align:center">333333</td>
        </tr></table>
        
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    $(function () {
        $('tr.id').click(function () {
var c=$(this).next('.test').is(":hidden");
 $('tr.test').hide();
 if(c)
 {
  $(this).nextUntil('.id').show(); 
 }
 else
 {
 $(this).nextUntil('.id').hide();
}
 });
    });
</script>

Answer 3

$(".id").each(function(){
                $(this).click(function(){            
                    $(this).nextAll('.test').toggle();
                    $( $(this).next(".id")).nextAll('.test').toggle();
                });    
        })不知道这样行不行,我没验证.......反正就是找到下一个.id,把刚才显示出来的都隐藏了

Answer 4

    $(function () {
        var tr;
        $('tr.id').click(function () {
            $(tr).nextUntil('.id')[tr == this ? 'toggle' : 'hide']();
            if (tr != this) $(this).nextUntil('.id').show();
            tr = this;
        });
    });