FANDOM


目前本功能暫時在手機版面不支援,之推出相關功能,參見手機版面最佳實踐

摺疊(Collapsing)是一個用來摺疊(或隱藏)任何HTML組成部分的功能。

很多時候一個頁面可能包含許多相關的內容,使頁面過長,使用摺疊的功能可以讓頁面縮短,讓感興趣的讀者自己打開內容。除了表格之外,其他wiki頁面的部分也可以設計摺疊。

要使用摺疊功能,只需使用 "mw-collapsible" 的語法。

摺疊表格

將"mw-collapsible"設定為class,可以摺疊一個表格以節省空間。(輸入左圖語法,顯示為右圖)

標題
数字 字母
1 A
2 B
3 C
{| class="article-table mw-collapsible" style="float:right"
|+標題
! 数字 !! 字母
|-
| 1 || A
|-
| 2 || B
|-
| 3 || C
|}

局部摺疊表格內容

將表格中的某儲存格內容摺疊,需要用上一點點的HTML代碼,這個可說是其不足之處。

X Y Z
下面內容默認隱藏 35 91
我是摺疊的內容 42 63
<table class="wikitable" style="float:right;">
<tr>
<th>X</th> 
<th>Y</th> 
<th>Z</th>
</tr>
<tr>
<td>下面內容默認隱藏</td> 
<td>35</td> 
<td>91</td>
</tr>
<tr>
<td class="mw-collapsible mw-collapsed">我是摺疊的內容</td> 
<td>42</td> 
<td>63</td>
</tr>
</table>

摺疊文字

可以在一篇文章中摺疊文字以減短頁面,並讓想要看的讀者自己打開其他的部分。

<div class="mw-collapsible">
這個文字可以摺疊。
</div>

顯示為:

這個文字可以摺疊。

進階設定

預設狀態

要將預設狀態設定為摺疊, 在"mw-collapsible"之外加上"mw-collapsed" ,如同下面表格所見:

{| class="mw-collapsible mw-collapsed wikitable"
! 這個頂部 || 是看得到的
|-
| 這個內容 || 會在第一次
|-
| 載入時 || 隱藏
|}
這個頂部 是看得到的
這個內容 會在第一次
載入時 隱藏

選擇可摺疊的內容

你也可以使用"mw-collapsible-content"來指定那個部分是可以摺疊的。

<div class="mw-collapsible mw-collapsed" style="width:100%">
這段文字不能摺疊,但下一段可以摺疊且預設隱藏:
<div class="mw-collapsible-content">這段文字預設為隱藏。</div>
這段文字應該可以看到。
</div>

會顯示為:

這段文字不能摺疊,但下一段可以摺疊且預設隱藏:

這段文字預設為隱藏。

這段文字應該可以看到。

自訂按鈕文字

不喜歡連結中的 展開/摺疊 這一對用語?沒問題!你可以使用"data-expandtext"來作展開的文字設定,以及"data-collapsetext"來作摺疊的修改。

{| class="article-table mw-collapsible" data-expandtext="顯示" data-collapsetext="隱藏"
!我的 || 頂部
|-
| A || B
|-
| C || D
|}

會顯示為:

我的 頂部
A B
C D

開關按鈕

如果你注意到上面例子中的表格,在第二欄中的鏈接實際上把表格的欄位變寬了。要解決這個問題,我們可以把這個開關設置在頁面中的其他地方。

要這樣做,我們需要先幫這個單元取一個ID。這個ID必須以"mw-customcollapsible-"為開頭,接著是一個獨特的名字。使用上面的表格,我們可以設定它的ID為 "mw-customcollapsible-myTable".

接著,我們要用"mw-customtoggle-myTable"作為一個class來增加一個按鈕(或連結、文字)(注意class跟上述的ID不同),例如:

{| class="article-table mw-collapsible" id="mw-customcollapsible-myTable"
!我的 || 頂部
|-
| A || B
|-
| C || D
|}

<div class="mw-customtoggle-myTable wikia-menu-button">顯示/隱藏 表格</div>

會顯示為:

我的 頂部
A B
C D

顯示/隱藏 表格

另參見

帮助及反馈

除了特别提示,社区内容遵循CC-BY-SA 授权许可。

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+