如何使用 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中文網其他相關文章！