时间戳

首页 > 解决方案 > 在jQuery中折叠和展开多个嵌套行

javascript - 在jQuery中折叠和展开多个嵌套行

问题描述

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

$(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”时第 1 级展开，并且只有当单击“collapseAccount”时，第 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>

任何帮助将不胜感激。

标签： javascriptjqueryhtml

解决方案

下面的代码应该做到这一点。我希望它对您想要实现的目标有所帮助：

  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>

推荐阅读