Jquery为具有多行的表切换

Question

我试图展示＆amp;隐藏工作正常的表的行。但我希望通过单击父行只显示其子行而不是所有行。

＆＃13;

＆＃13;

$(document).ready(function(){
$(".level-1").click(function(){
    
     var target = $(this).parent().children(".level-2");
    $(target).slideToggle("slow");

    });
});  

＆＃13;

table tr:nth-child(2n+1) {
    background-color: #F1F1F1;
}
.level-2 {display:none;}
.level-1:hover{cursor:pointer;}

＆＃13;

<table border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
       <td width="200">c1</td>
      <td width="200"><b>c2</b></td>
        <td width="200"><b>c3</b></td>
    </tr>
  </thead>
  <tbody>
       <tr class="level-1">
           <td width="200"><b>Parent1</b></td>
      <td class="spalte_1">&nbsp;</td>
      <td class="spalte_2">&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child1</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child2</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="level-1">
      <td><b>Parent2</b></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child1</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child2</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child3</td>
      <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr class="level-1">
      <td><b>Parent3</b></td>
      <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child1</td>
      <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child2</td>
      <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

链接到小提琴：fiddle 感谢您的帮助和建议！

Answer 1

您必须使用jQuery的nextUntil() API

替换以下行

var target = $(this).parent().children(".level-2");

与

var target = $(this).nextUntil(".level-1");