如何使用 jQuery 和 CSS 透過標題點擊切換表格行可見性？

點擊標題時展開和折疊表行

本文解決了當相應的標題列被展開時展開和折疊特定表行的挑戰單擊。

提供的 HTML 表格由具有交替標題部分的行組成。為了實現所需的行為，我們將利用 jQuery 的強大功能。

jQuery 方法

1. 辨識標頭元素：使用 .header 類別來決定哪些元素表行用作標題。
2. 切換可見性：按一下標題後，使用 nextUntil 方法選擇該標題後面的所有行，直到您遇到下一個標題。然後，slideToggle 方法會展開或折疊所選行。

程式碼片段

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

使用CSS 與偽元素的替代方法使用CSS 與偽元素的替代方法

切換 CSS 類別：指派一個 'expand ' 類別到點擊的標題並根據偽元素的狀態切換其顯示。

程式碼片段

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

This替代方法避免了追蹤多個 CSS 類別的需要，從而簡化了實作。

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

以上是如何使用 jQuery 和 CSS 透過標題點擊切換表格行可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！