首頁 >web前端 >css教學 >如何使用 jQuery 展開/折疊表行?

如何使用 jQuery 展開/折疊表行?

Patricia Arquette
Patricia Arquette原創
2024-11-03 07:54:03782瀏覽

How to Expand/Collapse Table Rows with 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn