Question

我在tr下方的第一行数据点击中包含2行的表格已展开。单击第二行时，通过关闭第一行数据（折叠）来扩展第二行下方的数据。问题是，当我单击第一行时，第二行数据仍处于展开状态。同时扩展第一行数据。有人可以建议如何折叠第二行数据吗？

下面的

是代码段：

$('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>

顺便说一句，您在此处尝试构建的内容称为手风琴，并且quite some solutions available { {3}}（更不用说already）。我不知道这对你有什么帮助，但也许你不需要重新发明轮子。

Jquery to折叠上一个tr并在单击它时展开另一个tr

1 个答案: