javascript - Jquery 折叠前一个 tr 并在单击时展开另一个 tr

Question

我有一个包含 2 行的表格，点击 tr 下面的第一行数据会展开。单击第二行时，第二行下方的数据会通过关闭第一行数据(折叠)展开。问题是当我单击第一行时，第二行数据仍处于展开状态。同时扩展第一行数据。谁能建议现在如何折叠第二行数据？

下面是代码片段:

$('tr.header').click(function() {
  $(this).nextUntil('tr.header').slideToggle(100, function() {});
  $(this).prevUntil('tr.header').slideUp(100, function() {});
});

HTML:

<table>
  <tr class="header">
    <td colspan="2">Header1</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td colspan="2">Header2</td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

Answer 1

你可以做的是为每个展开的 <tr> 添加一个类并使用所述类来定位他们以折叠展开的所有内容，无论它是在您单击的行之前还是之后。

这里有一个演示，它绝不是一个完整的解决方案，但它应该足以让您了解它是如何工作的。

编辑:根据您的要求，我更改了代码以在单击标题时折叠展开的部分。我改变的是:当一个部分被展开时，它的标题会得到一个额外的类，当一个标题被点击时，它的部分会根据它是否有类来展开或折叠。尽管如此，这只是概念证明而非完整的解决方案，如果您正在使用它，请记住这一点。

$('tr.header').click(function() {
  $('.expanded').slideUp(100, function() {});
  if (!$(this).hasClass('expanded-header')) {
    $(this).nextUntil('tr.header').addClass('expanded').slideToggle(100, function() {});
    $('.expanded-header').removeClass('expanded-header');
    $(this).addClass('expanded-header');
  } else {
    $(this).removeClass('expanded-header');
  }
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="header">
    <td colspan="2">Header1</td>
  </tr>
  <tr class="content">
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="content">
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td colspan="2">Header2</td>
  </tr>
  <tr class="content">
    <td>date</td>
    <td>data</td>
  </tr>
  <tr class="content">
    <td>data</td>
    <td>data</td>
  </tr>
</table>

顺便说一句，你在这里尝试 build 的东西叫做 Accordion ，并且有quite some solutions available already (更不用说 bootstrap has one included 了)。我不知道这是否对您有帮助，但也许您不需要重新发明轮子。