javascript - JQuery 中的 nextUntil 切换条件

Question

我正在使用 nextUntil 方法来切换我的表行值。除非在任何级别的最后一个链接中，否则它工作正常。例如(请参阅表格)，当我单击级别 1.2.2(第 3 类)时，它隐藏了所有底部行，因为它正在寻找下面的第 3 级是正确的。我相信我需要添加一个条件来实现这一点。但不知道如何添加条件。

我希望当任何级别低于(小于)点击级别时，它将停止切换。另外，有没有其他方法可以实现这些，因为这是一个缓慢的过程。

代码如下:

<table id=test>
  <tr class=1><td>Level 1</td></tr>
  <tr class=2><td>Level 1.1</td></tr>
  <tr class=3><td>Level 1.1.1</td></tr>
  <tr class=3><td>Level 1.1.2</td></tr>
  <tr class=2><td>Level 1.2</td></tr>
  <tr class=3><td>Level 1.2.1</td></tr>
  <tr class=3><td>Level 1.2.2</td></tr>
  <tr class=4><td>Level 1.2.2.1</td></tr>
  <tr class=4><td>Level 1.2.2.1</td></tr>
  <tr class=1><td>Level 2</td></tr>
  <tr class=2><td>Level 2.1</td></tr>
  <tr class=3><td>Level 2.1.1</td></tr>
  <tr class=3><td>Level 2.1.2</td></tr>
</table>

$(document).ready(function () {
    $('tr.3').click(function () {
        $(this).nextUntil('tr.3').slideToggle();
    });
});

提前致谢!

Answer 1

由于您无法更改 HTML 结构，因此有一个替代方案:

$('tr').click(function(event) {
  event.stopPropagation();
  var currentLevel = parseInt($(this).attr('class')),
    state = $(this).hasClass('hiding'),
    nextEl = $(this).next(),
    nextLevel = parseInt(nextEl.attr('class'));
  while (currentLevel < nextLevel) {
    nextEl.toggle(state);
    nextEl = nextEl.next();
    nextLevel = parseInt(nextEl.attr('class'));
  }
  $(this).toggleClass('hiding');
});

tr[class^="2"] td {
  padding-left: 20px;
}
tr[class^="3"] td {
  padding-left: 40px;
}
tr[class^="4"] td {
  padding-left: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
  <tr class="1">
    <td>Level 1</td>
  </tr>
  <tr class="2">
    <td>Level 1.1</td>
  </tr>
  <tr class="3">
    <td>Level 1.1.1</td>
  </tr>
  <tr class="3">
    <td>Level 1.1.2</td>
  </tr>
  <tr class="2">
    <td>Level 1.2</td>
  </tr>
  <tr class="3">
    <td>Level 1.2.1</td>
  </tr>
  <tr class="3">
    <td>Level 1.2.2</td>
  </tr>
  <tr class="4">
    <td>Level 1.2.2.1</td>
  </tr>
  <tr class="4">
    <td>Level 1.2.2.1</td>
  </tr>
  <tr class="1">
    <td>Level 2</td>
  </tr>
  <tr class="2">
    <td>Level 2.1</td>
  </tr>
  <tr class="3">
    <td>Level 2.1.1</td>
  </tr>
  <tr class="3">
    <td>Level 2.1.2</td>
  </tr>
</table>

类似于 Thor84no 的回答，但更简单，IMO。