用于包含多行的表的Jquery切换

Question

我正在尝试显示和隐藏表中的行，它工作得很好。但我希望通过单击父行，只显示它的子行，而不是所有行。

​

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

    });
});  

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

<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>

​

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

Answer 1

您必须使用jQuery的nextUntil() API

替换以下行

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

使用

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