Help:摺疊顯示

快捷方式

H:COLL

应当尽量使用mw自带的mw-collapsiblemw-collapsed及mw-collapsible-contentCSS类，避免使用過時的NavFrame。

在中文維基百科，摺疊顯示應用在很多條目的導航模板、討論頁面等地方，透過滑鼠的點擊就可以展開和收縮一些版面，以方便讀者進行導航閱讀。

此外，中文維基百科在2011年7月引入了新的折疊效果，其客製性更強，有關詳情參見#新摺疊效果。

摺疊模板

為了方便維基編輯的使用，下面例舉了一些常用的有摺疊功能的模板。至於它的實現基礎，放在最下方說明，以供有興趣研究它的維基人。

{{hideH|通用摺疊}}
摺疊內容
{{hideF}}

通用摺疊

摺疊內容

{{delH|關閉刪除投票}}
刪除討論內容
{{delF}}

本討論已經结束，處理結果：關閉刪除投票。请不要对这个存档做任何编辑。

刪除討論內容

{{Talkendh|關閉保护页面、破坏等请求（完成与未完成）}}
刪除討論內容
{{Talkendf}}

本討論已經结束，處理結果：關閉保护页面、破坏等请求。请不要对这个存档做任何编辑。

刪除討論內容

{{talkH|關閉無關討論}}
討論內容
{{talkF}}

關閉無關討論，本框内討論文字已關閉，相關文字不再存檔。

如有異議，請諮詢互助客棧或其他管理員。執行人：
討論內容

{{TransH}}
非中文文字
{{TransF}}

一些非中文的文字因为尚未翻譯而被隐藏，歡迎參與翻譯。

非中文文字 not chinese

注意：{{delH}}重定向至{{Talkendh}}，{{delF}}、{{Talkendf}}、{{TransF}}重定向至{{hideF}}

更多的見Category:摺疊模板

實現基礎

注意：中文維基是獨立實現的摺疊，與其它維基計劃的摺疊功能在語法上有細小差異。

閱讀這一節的內容要求你有一點點的HTML和CSS基礎知識，透過在原始碼中設定特定的class（HTML屬性）值，就可以實現指定版面的可摺疊性，並由MediaWiki:Common.js中的javascript腳本自動完成相關的DHTML動作。

目前有兩種HTML元素可以設定成可摺疊，分別是div元素和table元素。本章節以下的說明用CSS選擇器來說明各種class設定。

下方是class值指南：

定義摺疊塊

div.NavFrame 或 table.collapsible ：指示該區域或表格是可折疊的，該值是該元素可以摺疊所必須。我們稱這樣的一個元素為摺疊塊。

<div class="NavFrame">...</div>

或：

<table class="collapsible">...</table>

或：

{| class="collapsible"
  這里放置表格的wiktext語法
|}

div.collapsed 或 table.collapsed ：指示該摺疊塊的初始狀態是已摺疊的，如果沒有設定該值，則摺疊塊的預設初始狀態是展開的。下面只列出div的示例代碼，table的類似。

<div class="NavFrame collapsed">...</div>

請比較該值設定和不設定的區別，它們都可以透過點擊進行摺疊和展開。

設定了collapsed

這是展開的文字。

沒有設定collapsed

這是展開的文字。

div.autocollapse 或 table.autocollapse ：指示該摺疊塊的初始狀態是否摺疊由該頁面的可摺疊塊數量控制，也可以叫它自動摺疊塊。目前系統定義為如果有2個及以上的摺疊塊，則自動摺疊塊就摺疊，否則自動摺疊塊展開。

定義摺疊標題

摺疊標題的作用是系統自動生成“顯示▼/隱藏▲”的指示，滑鼠在摺疊標題單擊時，就會產生摺疊或展開的動作。

定義摺疊標題主要是針對div摺疊塊的，透過在div.NavFrame中放置一個div.NavHead元素，則這個div.NavHead元素就變成摺疊標題供點擊。至於table，系統自動將表格的第一行（并且該行有標題單元，即th）作為摺疊標題。

在上面自動摺疊塊例子中的代碼為：

<div class="NavFrame collapsed"><div class="NavHead">設定了collapsed</div><div>這是展開的文字。</div></div>

下面是一個表格的例子：

{| class="collapsible collapsed"
|-
! 這一行將作為標題
|-
|隱藏文字
|}

效果：

這一行將作為標題
隱藏文字

如果在div.NavFrame中沒有設定div.NavHead，或者在table.collapsible中第一行沒有標題單元格（th），則該摺疊塊將沒有摺疊標題。這樣沒有熱點供滑鼠來點擊，也就無法進行展開和收縮了。

注：沒有摺疊標題的摺疊塊可以自行定義熱點來解決滑鼠操控問題，見下方。

定義顯示與隱藏部分

通常對顯示和隱藏部分不必定義，所有在摺疊塊中不屬於摺疊標題的部分都預設成隱藏部分。然而有時為了某些需求，我們需要自行定義顯示和隱藏部分以達到效果。

首先要明確一下顯示隱藏部分的意義，所謂顯示與隱藏是相對class="collapsed"的摺疊塊的初始狀態來說的，即一個收縮了的摺疊塊，它沒有展開的部分就是隱藏部分，它展開的部分就是顯示部分。這一點不要弄錯，對沒有設定class="collapsed"來說，顯示部分在頁面第一次呈現時，反而是收縮了的。

透過設定.toggleShow和.toggleHide來定義顯示和隱藏部分。下面是例子：

<div class="NavFrame collapsed" style="width: 31em; height: 3em;">
<div class="NavHead">自訂顯示隱藏</div>
<div class="toggleShow" style="float:right; background-color:#F77; width:15em;">初始顯示</div>
<div class="toggleHide" style="float:left; background-color:#77F; width:15em;">初始隱藏（點擊後顯示）</div>
</div>

效果：

自訂顯示隱藏

初始顯示

初始隱藏（點擊後顯示）

自訂摺疊指示

如果你對摺疊標題的系統自動生成“顯示▲/隱藏▼”的指示不滿意，只需要滿足將你的自訂指示要放在摺疊標題中的<span class="NavToggle">自訂指示文字</span>元素裡。

如果對自訂摺疊指示在收縮和展開情況下顯示不同的文字，可以在“自訂指示文字”中應用上一節提到的自訂顯示和隱藏部分。

例子代碼：

<div class="NavFrame collapsed" style="width: 31em;">
<div class="NavHead">自訂摺疊標題的指示→<!-- 自訂指示文字
	--><span class="NavToggle"><!--
		--><span class="toggleShow">把我打開</span><!-- 顯示部分
		--><span class="toggleHide">把我關上</span><!-- 隱藏部分
	--></span><!--
--></div>
<div class="toggleShow">這是展開的文字</div>
<div class="toggleHide">這是隐藏的文字</div>
</div>

效果：

自訂摺疊標題的指示→

把我打開把我關上

這是展開的文字

這是隐藏的文字

定義非摺疊部分

在摺疊塊的直接子元素中可以指定哪些部分不參加摺疊切換，只需要指定.uncollapse就可以了。例子見下面的定義熱點部分。

定義熱點部分

在摺疊塊內部的任何元素上，應用.toggleHotspot，就可以將該元素變成一個熱點——滑鼠點擊後就能切換摺疊動作。事實上，摺疊標題本身就是一個熱點(不同在於摺疊標題能自動產生一個摺疊指示)。下方示例一個沒有摺疊標題的摺疊塊是如何透過設定熱點進行摺疊操作的(注意：热点区域通常需要同时被设置成不可摺疊──uncollapse)：

<div class="NavFrame collapsed" style="width: 31em; height: 4em;">
<div class="toggleShow" style="float:right; background-color:#F77; width:15em;">初始顯示</div>
<div class="toggleHide" style="float:left; background-color:#77F; width:15em;">初始隱藏（點擊後顯示）</div>
<div class="uncollapse toggleHotspot" style="clear:both; background-color:#7F7;">點我試試</div>
</div>

效果：

初始顯示

初始隱藏（點擊後顯示）

點我試試

新摺疊效果

新的摺疊效果並不是由中文維基百科開發，而是由一社外語社群開發，中文維基再採用。目前，此類摺疊並不常用，但他的客製性比舊的更強，當然也有他的壞處^[為何？]。

基本效果：

代碼、顯示

CSS ID,Class

提示

<div class="mw-collapsible" data-collapsetext="點此隱藏" data-expandtext="點此開啟">
Lorem ipsum
</div>

Lorem ipsum

mw-collapsible

可以加入「data-collapsetext」屬性定義打開時的文字，及「data-expandtext」定義隱藏時顯示的文字。

<div class="mw-collapsible mw-collapsed">
Lorem ipsum
</div>

Lorem ipsum

mw-collapsible mw-collapsed

<div class="mw-collapsible mw-collapsed">
第一個摺疊
<div class="mw-collapsible" style="background:#eee">
第一个子摺疊
</div>
<div class="mw-collapsible" style="background:#eee">
第二个子摺疊
</div>
</div>

第一個摺疊

第一個子摺疊

第二個子摺疊

mw-collapsible mw-collapsed

可在折疊中包含多個子摺疊

{| class="wikitable sortable mw-collapsible"
! 你好
! 世界
|-
| 內容
| 會在
|-
| 這裡
| 出現
|}

你好	世界
內容	會在
這裡	出現

wikitable sortable mw-collapsible

首行將會作為標題顯示

<table class="wikitable">
<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">我是mw-collapsible的內容</td> <td>42</td> <td>63</td>
</tr>
</table>

X	Y	Z
下面的內容是預設隱藏的	35	91
我是mw-collapsible的內容	42	63

mw-collapsible mw-collapsed

這個有時候需要較深的HTML代碼，正常理應使用簡單的wikitable代碼。

<ul class="mw-collapsible">
<li>Lorem
<li>Ipsum
<li>Dolor
</ul>

Lorem
Ipsum
Dolor

mw-collapsible

可以使用較簡單的代碼

<ol class="mw-collapsible">
<li>One
<li>Two is more than one
<li>..a total of three items!
</ol>

One
Two is more than one
..a total of three items!

mw-collapsible

:<strong class="mw-customtoggle-myDivision">@</strong>

<div class="mw-customtoggle-myDivision">點選這裡或任何@來打開或隱藏。</div>

<div class="mw-customtoggle-myDivision" style="cursor:pointer">
[[File:At_char.svg|100px|left|link=|title=Click me!]] ⇐ @@這裡或圖片都可以打開@@
<div style="clear:both"></div></div>

<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
<div class="toccolours mw-collapsible-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
. Morbi commodo, ipsum sed pharetra gravida
</div>
</div>

@

點選這裡或任何@來打開或隱藏。

⇐ @@這裡或圖片都可以打開@@

Lorem ipsum dolor sit amet, consectetuer adipiscing elit . Morbi commodo, ipsum sed pharetra gravida

class=mw-customtoggle-myDivision, class=toccolours mw-collapsible-content, id=mw-customcollapsible-myDivision

每頁面只可用一次

<div class="mw-customtoggle-myTable">點此摺疊表格</div>
{| class="wikitable sortable mw-collapsible" id="mw-customcollapsible-myTable"
! Hello
! World
|-
| Content
| Goes
|-
| In
| Here
|}

點此摺疊表格

Hello	World
Content	Goes
In	Here

mw-customtoggle-myTable

每頁面只可用一次

<div class="mw-customtoggle-myList">摺疊列表</div>

<ul class="mw-collapsible" id="mw-customcollapsible-myList">
<li>A
<li>B
<li>C
<li>D
</ul>

摺疊列表

A
B
C
D

mw-customcollapsible-myList

每頁面只可用一次

<table class="wikitable">
<tr>
<th>X</th> <th>Y</th> <th>Z</th>
</tr>
<tr>
<td><span class="mw-customtoggle-AA mw-customtoggle-BB mw-customtoggle-CC">
點這裡隱藏或顯示行A,B及C
</span></td> <td>20</td> <td>11</td>
</tr>
<tr id="mw-customcollapsible-AA" class="mw-collapsible mw-collapsed">
<td>行A</td> <td>20</td> <td>7</td>
</tr>
<tr id="mw-customcollapsible-BB" class="mw-collapsible mw-collapsed">
<td>行B</td> <td>21</td> <td>11</td>
</tr>
<tr id="mw-customcollapsible-CC" class="mw-collapsible mw-collapsed">
<td>行C</td> <td>29</td> <td>1</td>
</tr>
<tr>
<td>普通行</td><td>0</td><td>30</td>
</tr>
</table>

X	Y	Z
點這裡隱藏或顯示行A,B及C	20	11
行A	20	7
行B	21	11
行C	29	1
普通行	0	30

mw-customtoggle, mw-customcollapsible, mw-collapsible mw-collapsed

每頁面只可用一次，宜使用更簡單的表格代碼

以上各項可加入mw-collapsed來預設隱藏。

摺疊模板

相關政策

實現基礎

定義摺疊塊

定義摺疊標題

定義顯示與隱藏部分

自訂摺疊指示

定義非摺疊部分

定義熱點部分

新摺疊效果