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

toggleClass not keeping previous click event jquery

本文关键字：事件 jquery 保留 toggleClass      更新时间：2023-09-26

我在这里发现了一个显示/隐藏函数(不是我的工作，但类似于我的问题)，并基于此，我创建了一个小提琴演示(https://jsfiddle.net/q7sfeju9/)，但在单击显示行时不能正常工作。

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

请告诉我该怎么做。

Thanks in advance

更新:

请参阅下面的代码-

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

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

下列内容是否具有期望的行为?根据我的理解，当一个级别被展开时，只应该显示直接的子级别。

<<p> 代码片段/strong> 

    $('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的澄清纠正行为。我承认，这不是我写过的最漂亮的代码，但它可以工作。

相关文章：