Question

我使用nextUntil方法切换表格行值。除非在任何级别的最后一个链接中，否则它正常工作。例如（请参见表格），当我点击Level 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。

Answer 2

听起来好像这应该是一个嵌套的HTML结构，它更容易：

＆＃13;

$('li').click(function(event) {
  event.stopPropagation();
  $(this).children().find('li').slideToggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id=test>
  <li>
    Level 1
    <ul>
      <li>
        Level 1.1
        <ul>
          <li>
            Level 1.1.1
          </li>
          <li>
            Level 1.1.2
          </li>
        </ul>
      </li>
      <li>
        Level 1.2
        <ul>
          <li>
            Level 1.2.1
          </li>
          <li>
            Level 1.2.2
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 3

我已经玩了一些游戏，我绝不认为这是最佳的，但我认为我已经能够调整你所拥有的东西，至少可以起作用。希望它是可以理解的，但我改变的主要原则是，不是直接在slideToggle返回的集合上使用nextUntil，而是使用each为每个人调用一个函数该集合中的元素。

如果有任何需要澄清或改进，请告诉我。

＆＃13;

$(document).ready(function () {
  $('tr').click(function () {
    var toggledLevel = parseInt($(this).attr('class'));
    var hiding = !$(this).hasClass('hidden');
    $(this).toggleClass('hidden');
    $(this).nextUntil('tr.' + toggledLevel).each(function() {
      var $this = $(this)
      var currentLevel = parseInt($this.attr('class'));
      if (currentLevel > toggledLevel) {
          $this.toggle(!hiding);
          $this.removeClass('hidden');
      }
    });
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

在JQuery中nextUntil切换的条件

3 个答案: