Question

我找到了一个显示/隐藏功能here（不是我的工作但是我的问题类似）并且基于我已经创建了一个小提示演示（https://jsfiddle.net/q7sfeju9/），但点击时它无法正常工作显示行。

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

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

提前致谢

更新

请参阅以下代码 -

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

以下是否具有所需的行为？据我了解，当一个级别扩展时，只应显示直接的子级别。

CODE SNIPPET

    $('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的澄清纠正了行为。我承认，不是我写的最漂亮的代码，但它确实有用。

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

1 个答案: