javascript - 隐藏/显示具有特定类的表行，直到具有不同类名的另一行？

Question

我有要显示和隐藏的行，但只能显示到下一个第一级行。我的代码正在切换所有二级行，而不是切换到下一个一级行之前的行。

当您单击“第一级”类的行时，我希望在“第一级”的下一个实例之前切换到“第二级”类的每一行。

http://jsfiddle.net/a837tc24/

<table>
  <tbody>
    <tr class="first-level">
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="first-level">
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
  </tbody>
</table>

js:

var firstLevel = $('.first-level')
var secondLevel = $('.second-level')

$(firstLevel).click(function() {
    $(secondLevel).nextUntil(firstLevel).toggle("slow");
});

Answer 1

您需要从点击的元素开始:

$('.first-level').click(function() {
    $(this).nextUntil('.first-level').toggle("slow");       
});

传递整个集合是行不通的，因为没有单一的引用点可以开始

DEMO