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