如何使用 jQuery 和 CSS 通过标题点击切换表行可见性？

单击标题时展开和折叠表行

本文解决了当相应的标题列被展开时展开和折叠特定表行的挑战单击。

提供的 HTML 表格由具有交替标题部分的行组成。为了实现所需的行为，我们将利用 jQuery 的强大功能。

jQuery 方法

1. 识别标头元素：使用 .header 类来确定哪些元素表行用作标题。
2. 切换可见性：单击标题后，使用 nextUntil 方法选择该标题后面的所有行，直到遇到下一个标题。然后，slideToggle 方法会展开或折叠所选行。

代码片段

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

使用 CSS 和伪元素的替代方法

1. CSS 规则：使用 :after 属性定义一个伪元素来表示展开/折叠符号（或 -）。
2. 切换 CSS 类：分配一个 'expand ' 类到单击的标题并根据伪元素的状态切换其显示。

代码片段

<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>

This替代方法避免了跟踪多个 CSS 类的需要，从而简化了实现。

以上是如何使用 jQuery 和 CSS 通过标题点击切换表行可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！