如何使用 jQuery 展开/折叠表行？

使用 jQuery 展开/折叠表格行

根据标题点击展开和折叠表格行是网页设计中的常见要求。在本文中，我们将探索如何使用 jQuery 来实现此目的。

给定以下表结构：

<code class="html"><table>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table></code>

我们可以通过为每个标题行分配一个唯一的类来完成此任务。单击标题时，我们可以使用 nextUntil 方法选择其下方的所有行，直到下一个标题。这使我们能够根据单击的标题仅折叠或展开相关行。

这里有一个简单的 jQuery 代码片段来实现此行为：

<code class="js">$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

在此代码中，我们将单击事件附加到具有标头类的所有元素。单击标题时，它会查找下一个标题之前的所有后续行，并使用 slipToggle 切换其可见性。

替代方法

另一个选项是使用切换方法而不是 slipToggle，它提供更简单的实现：

<code class="js">$('.header').click(function () {
    $(this).toggleClass('expand');
    $(this).nextUntil('tr.header').toggle();
});</code>

这里，我们在单击的标题上切换展开类，并使用切换来切换所有后续行的显示。

最后，CSS 伪元素也可以是用于更直观地表示展开/折叠状态：

<code class="css">.header .sign:after {
  content: "+";
  display: inline-block;
}

.header.expand .sign:after {
  content: "-";
}</code>

<code class="js">$('.header').click(function () {
    $(this).toggleClass('expand');
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

在此版本中，expand 类还将 CSS 伪元素显示的符号从加号更改为减号，提供行状态的视觉指示。

以上是如何使用 jQuery 展开/折叠表行？的详细内容。更多信息请关注PHP中文网其他相关文章！