多行表的 Jquery 切换答案

【问题标题】：Jquery toggle for table with multiple rows多行表的 Jquery 切换
【发布时间】：2017-10-26 21:22:20
【问题描述】：

我正在尝试显示和隐藏工作正常的表格行。但我希望通过单击父行只显示其子行而不是所有行。

$(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 感谢您的帮助和建议！

【问题讨论】：

标签： jquery html-table toggle

【解决方案1】：

你必须使用 jQuery 的 nextUntil() API

替换下面一行

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

与

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

【讨论】：