javascript - 如何折叠表格中所有显示的行？

Question

我正在实现一个可折叠表格，类似于 TreeView 的操作方式。有 3 个级别。在我当前的代码中，我可以展开 3 个级别，但是，当我折叠第一个级别时，第 3 级仍然显示。

有没有办法让我在点击第 1 级时折叠第 3 级？

我的jquery是

  $(function() {
    $(".firstlevel").click(function(event) {
    $(this).(".divider").filter(".secondlevel").toggle("slow");
    });

  $(".secondlevel").click(function(event) {
    $(this).nextUntil(".secondlevel").toggle("slow");
  });
});

HTML 和 Jquery 位于 https://jsfiddle.net/h4qacruv/

Answer 1

为行级别对应的每一行添加属性，例如:

<tr class="thirdlevel" data-level=3>

并使用此代码

$(function() {

  $("tr[data-level]").click(function(event) {
    //$(this).nextUntil(".divider").filter(".secondlevel").toggle("slow");
    var level = $(this).data('level');
    var that  = $(this);
    var siblings = $(this).toggleClass('shown').nextUntil('[data-level='+level+']:not(.divider)').filter(function(i) {
       var shown = that.hasClass('shown');
       return shown 
         ? $(this).data('level') == level + 1
         : $(this).data('level') >= level + 1;
    });//.toggle('show');

    if (that.hasClass('shown')) {
       siblings.show();
    } else {
       siblings.removeClass('shown').hide();
    }
  });
});