表示されたすべての行をテーブル内で折りたたむにはどうすればよいですか？

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