Question

我正在实现一个可折叠表，类似于树视图的运行方式。有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();
    }
  });
});

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

1 个答案: