모두 확장 모두 축소/트리 테이블이 작동하지 않음 propery?

Question

중첩 트리 테이블에 모두 확장/모두 축소 기능을 적용하려고하는데 원하는 출력이 표시됩니다. 나는 같은 것을 this related question 따라 갔다. 여기에 fiddle입니다. 이미지가 확대 전체 테이블이 숨겨져됩니다 축소를 클릭하지 않고, 나는 모든 TR이 확대를 확장 를 클릭하면

<a class="myexpand" href="#">Expand</a> | <a class="mycollapse" href="#">Collapse</a> 
<table id="mytable"> 
    <thead> 
     <th class="firstCol">Titulo</th> 
     <th class="LastCol">Valor</th> 
    </thead> 
    <tr data-depth="0" class="collapse level0"> 
     <td><span class="toggle collapse"></span>Item 1</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="1" class="collapse level1"> 
     <td><span class="toggle"></span>Item 2</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="2" class="collapse level2"> 
     <td><span class="toggle"></span>Item 3</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="3" class="collapse level3"> 
     <td>Item x</td> 
     <td>Letra</td> 
    </tr> 
    <tr data-depth="1" class="collapse level1"> 
     <td><span class="toggle"></span>Item 4</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="2" class="collapse level2"> 
     <td>Item 4x</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="0" class="collapse collapsable level0"> 
     <td><span class="toggle collapse"></span>Item 5</td> 
     <td>123</td> 
    </tr> 
    <tr data-depth="1" class="collapse collapsable level1"> 
     <td>Item 6</td> 
     <td>123</td> 
    </tr> 
</table> 

---

SCRIPT

---

$(function() { 
    $('#mytable').on('click', '.toggle', function() { 
     //Gets all <tr>'s of greater depth 
     //below element in the table 
     var findChildren = function (tr) { 
      var depth = tr.data('depth'); 
      return tr.nextUntil($('tr').filter(function() { 
       return $(this).data('depth') <= depth; 
      })); 
     }; 

     var el = $(this); 
     var tr = el.closest('tr'); //Get <tr> parent of toggle button 
     var children = findChildren(tr); 

     //Remove already collapsed nodes from children so that we don't 
     //make them visible. 
     //(Confused? Remove this code and close Item 2, close Item 1 
     //then open Item 1 again, then you will understand) 
     var subnodes = children.filter('.expand'); 
     subnodes.each(function() { 
      var subnode = $(this); 
      var subnodeChildren = findChildren(subnode); 
      children = children.not(subnodeChildren); 
     }); 

     //Change icon and hide/show children 
     if (tr.hasClass('collapse')) { 
      tr.removeClass('collapse').addClass('expand'); 
      children.hide(); 
     } else { 
      tr.removeClass('expand').addClass('collapse'); 
      children.show(); 
     } 
     return children; 
    }); 
    $('.toggle').trigger('click'); 

    $(".myexpand").click(function() { 
      $("#mytable tr").show("slow"); 
    }); 
    $(".mycollapse").click(function() { 
      $("#mytable tr").hide("fast"); 
    }); 


}); 

문제입니다.

효율적인 방법으로 누군가를 도와 줄 수 있습니까?

미리 감사드립니다.

Answer 1

아래처럼 사용 .... u는 당신이 바이올린을 제공 할 수

$(".mycollapse").click(function() { 
      $("#mytable tr").hide("fast"); 
      $("#mytable thead tr").show("fast"); 
      $("#mytable tr.level0").show("fast"); 
     });