如何使用 jQuery 动态展开和折叠表行？

使用 jQuery 动态展开和折叠表格行

问题：

展开或折叠表格单击特定列标题时的行会带来挑战。为了简化此任务，可以使用自定义 CSS 类来区分每个标题中的行。但是，管理多个标头的多个 CSS 类可能会变得很麻烦。

解决方案：

为了避免跟踪多个 CSS 类的复杂性，另一种方法是利用 nextUntil( ) jQuery 中的方法。此方法检索单击的标题行之后的所有行，直到遇到下一个标题行。

代码片段：

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

HTML 结构：

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

示例：

在此示例中，类“header”被分配给标题行。单击标题行时，使用 SlideToggle() 方法，紧邻其下方的行会在隐藏和可见之间切换。

其他功能：

• 您可以在标题行中使用 span 元素来显示“”或“-”符号，该符号在展开或折叠行后切换：

<code class="javascript">$('.header').click(function(){
    $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

• 切换 span切换完成后异步图标/文本，使用slideToggle()方法的promise()：

<code class="javascript">$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
    $this.find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
});</code>

• 或者，使用CSS伪元素来表示展开/折叠在标题上签名并切换类：

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

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

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