在jQuery中折叠和扩展多个嵌套行

Question

我需要一些帮助来折叠和扩展嵌套行。 目前我的代码在第一级按需扩展和折叠，但后续级别也显示。

 $(document).ready(function(e) { $('.collapseTitle').click(function() { $(this).parent() .parent() .next('tbody') .toggleClass('collapsed'); }); }); 

 .collapsed { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <td class="collapseTitle">Title</td> </tr> </thead> <tbody class="collapsed"> <tr> <td>Level 1</td> </tr> <tr> <td>Level 2</td> </tr> </tbody> </table> 

当点击“collapseTitle”并且仅当点击“collapseAccount”时，我试图实现Level 1扩展，Level 2会扩展。 现在我知道我的代码应该如下所示，但我正在努力...

<table>
  <thead>
    <tr>
      <td class="collapseTitle">Title</td>
    </tr>
  </thead>

  <tbody>
    <tr class="collapsed account">
      <td class="collapseAccount">Level 1</td>
    </tr>

    <tr class="collapsed level">
      <td>Level 2</td>
    </tr>
  </tbody>
</table>

<script>
$(document).ready(function(e) {
    $('.collapseTitle').click(function() {
        $(this).parent().parent().next('tbody tr').toggleClass('account');
    });
});

$(document).ready(function(e) {
    $('.collapseAccount').click(function() {
        $(this).next('tr').toggleClass('level');
    });
});
</script>

任何帮助将不胜感激。

Answer 1

以下代码应该这样做。 我希望它有助于你想要实现的目标：

1. 单击列的标题/标题时折叠/展开列
2. 折叠/展开account行后面的所有行（直到下一个account行）

您需要做的唯一事情是将类account添加到更高级别的行。 当你用循环显示这些时，你可以很容易地做到这一点。

 .collapsed { /* using visibility, since display causes layout issues */ /* due to empty rows rows/columns collapsing */ visibility: collapse; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <td>Title1</td> <td>Title2</td> </tr> </thead> <tbody> <tr class="account"> <td class="collapsed">Account Summary - Account A</td> <td class="collapsed">Account Summary - Account A</td> </tr> <tr class="collapsed"> <td class="collapsed">Account Details Part I - Account A</td> <td class="collapsed">Account Details Part I - Account A</td> </tr> <tr class="collapsed"> <td class="collapsed">Account Details Part II - Account A</td> <td class="collapsed">Account Details Part II - Account A</td> </tr> <tr class="account"> <td class="collapsed">Account Summary - Account B</td> <td class="collapsed">Account Summary - Account B</td> </tr> <tr class="collapsed"> <td class="collapsed">Account Details Part I - Account B</td> <td class="collapsed">Account Details Part I - Account B</td> </tr> </tbody> </table> <script> $(document).ready(() => { /* the following handlers expand/collapse the columns */ $('thead > tr > td').each((i, el) => { $(el).click(() => { const colIndex = $(el).index() + 1; const nRows = $('tbody > tr').length; for (let j = 0; j < nRows; j += 1) { let cellSelector = `tbody > tr:nth-child(${j+1})` cellSelector += `> td:nth-child(${colIndex})`; $(cellSelector).toggleClass('collapsed'); } }) }) /* the following handlers expand/collapse the account-details rows */ $('tbody > tr.account').each((i, el) => { $(el).click(() => { $(el).nextUntil('.account').each((j, ele) => { $(ele).toggleClass('collapsed'); }) }) }) }); </script> 

Answer 2

你的jQuery选择器对于toggleClass来说有点偏。 您可以使用行的类名进行切换。 您还应创建一个要切换的类，以显示行/隐藏它。 例如：

编辑：

我现在动态创建标题和行，以便更好地了解如何使用data-属性完成此操作。

您将拥有一个与data-属性匹配的标题td和一行td，因此当您单击标题时将显示相应的tr。 因此，例如，如果单击标题1（ data-index=1 ），则将显示属性data-rowindex=1的tr。

 $(document).ready(function(e) { createTable(); $('.collapseTitle').click(function() { // grab the data-index value from the clicked title let index = $(this).attr("data-index"); // find a tr that has the attribute data-rowindex and it matches index $("tr[data-rowindex='" + index + "']").toggleClass("collapsed"); }); }); function createTable(){ // create the titles and the level rows for(let i = 0; i < 3; i++){ // create the title row let $trTitle = $('<tr>'); let $tdTitle = $('<td>', {class: "collapseTitle", text: "Title " + i}); $tdTitle.attr("data-index", i); let $finalTitleRow = $trTitle.append( $tdTitle ); // create the level row let $trLevel = $('<tr>', {class: "collapsed account"} ); $trLevel.attr("data-rowindex", i); let $tdLevel = $('<td>', {text: "Level " + i}); let $finalLevelRow = $trLevel.append( $tdLevel ); // add the title and level row pairs to the head and body $("#myTableHead").append($finalTitleRow[0]); $("#myTableBody").append($finalLevelRow[0]); } } 

 .collapsed { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead id="myTableHead"> </thead> <tbody id="myTableBody"> </tbody> </table> 

Answer 3

我设法找到了我正在寻找的答案...感谢“stackoverfloweth”， 回答我的问题

到目前为止帮助我的代码片段如下，

$('.parent-row').click(function(){
var $element = $(this).next();
while(!$element.hasClass('parent-row')){
    $element.toggle();
    if($element.next().length >0){
        $element = $element.next();   
    }
    else{
        return;
    }
} });

$('.child-row.has-children').click(function(){
var $element = $(this).next();
while($element.hasClass('child-child-row')){
    $element.toggle();
    if($element.next().length >0){
        $element = $element.next();   
    }
    else{
        return;
    }
} });