Question

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

当你点击“第一级”类的行时，我希望每行都有“第二级”类，直到下一个“第一级”实例切换为止。

<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

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

1 个答案: