javascript - toggleClass 不保留以前的点击事件 jquery

Question

我找到了一个显示/隐藏函数 here (不是我的工作，但与我的问题类似)并基于此我创建了一个 fiddle 演示(https://jsfiddle.net/q7sfeju9/)，但单击以显示行时它无法正常工作。

在 fiddle 中，如果我先隐藏 Level 1.2，然后隐藏 Level 1.1，最后隐藏 Level 1，工作正常。现在，如果我再次单击 Level 1，它应该只显示 Level 1.1 和 Level 1.2，而不是所有子级别。但它显示了所有级别和子级别。如果我隐藏任何子级别，我需要这些级别应该隐藏直到被点击。

请有人帮助我，我该怎么做。

提前致谢

更新:

请看下面的代码-

$('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;
}

<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>

Answer 1

您需要检查 child 的状态，并在适当的时候使用 if/else 来切换它们。

以下行为是否符合预期？据我了解，当一个级别被展开时，应该只显示直接的子级别。

代码片段

    $('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();
    nextEl = nextEl.next();
    nextLevel = parseInt(nextEl.attr('class'));
  }
  $(this).toggleClass('hiding');
  hideChildren()
});

// the below function ensures that the children of the previously clicked row remain hidden
function hideChildren() {
$(".hiding").each( function() {
var currentLevel = parseInt($(this).attr('class')),
nextEl = $(this).next(),
    nextLevel = parseInt(nextEl.attr('class'));
  while (currentLevel < nextLevel ) {
      nextEl.hide();
    nextEl = nextEl.next();
    nextLevel = parseInt(nextEl.attr('class'));
  }
})
}

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>

编辑:根据 OP 的说明更正了行为。我承认，这不是我写过的最漂亮的代码，但它确实有效。