维基百科:旧版折叠显示

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

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

弃用说明

NavFrame已弃用，取而代之的是使用mw-collapsible、mw-collapsed及mw-collapsible-contentCSS类。在将NavFrame从所有包含它的条目中移除或替换后，CSS和JavaScript也将被移除。用户可能希望更新页面，以便折叠元素继续按照他们预期的方式工作。见下文：

迁移

用户应放弃NavFrame，可通过以下三种方式之一进行迁移：

1. 选择合适的折叠模板
2. 迁移到表格结构
3. 自行迁移HTML

关于2和3的基础知识可从MediaWiki.org上获取。

要迁移带有div的基本HTML，您需要进行以下更改：

从

<div class="NavFrame (collapsed)">
  <div class="NavHead">折叠标题</div>
  <div class="NavContent">
    折叠内容
  </div>
</div>

到

<div class="mw-collapsible (mw-collapsed)">
  <div class="collapsible-title">折叠标题</div>
  <div class="mw-collapsible-content">
    折叠内容
  </div>
</div>

要以完美像素的方式进行迁移，请参见下文。这种方式保留了颜色和边框，并消除了导航切换按钮和居中标题的一些跳跃感，但确实需要添加一个新的div，以及与应用于NavFrame元素的任何现有样式合并：

从

<div class="NavFrame (collapsed)">
  <div class="NavHead">折叠标题</div>
  <div class="NavContent">
    折叠内容
  </div>
</div>

到

<div class="mw-collapsible (mw-collapsed)" style="padding: 4px; border: 1px solid #a2a9b1; text-align: center; font-size: 95%;">
  <div class="skin-nightmode-reset-color collapsible-title" style="line-height: 1.6em; font-weight: bold; background-color: #ccf;"><div style="margin: 0 4em;">折叠标题</div></div>
  <div class="mw-collapsible-content" style="font-size: 100%; text-align: left;">
    折叠内容
  </div>
</div>

要在迁移后保持折叠标题可点击的特性，请前往您的参数设置，单击“小工具”选项卡，选中“可点击折叠标题”的复选框。有关更多信息，详见Wikipedia:可点击折叠标题。

摺疊模板

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

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

通用摺疊

摺疊內容

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

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

刪除討論內容

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

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

刪除討論內容

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

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

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

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

已隱藏部分未翻譯内容，歡迎參與翻譯。

非中文文字 not chinese

注意：{{delH}}重定向至{{Talkendh}}，{{delF}}、{{Talkendf}}、{{TransF}}重定向至{{hideF}}，其余参見Category:摺疊模板。

相關方针

主页面：Wikipedia:隱藏元素和Wikipedia:剧透内容

摺疊功能在主條目空間和portal空間的使用是有限制的，但在其它空間頁面下一般不會限制。由於主條目空間和portal空間是作為百科知識的載體，面對讀者，它不應當在知識的呈現上進行過多的花哨展示；並且，維基百科的條目內容要在包括電腦的多種介面上裝載，比如紙介質、PDA、手機等，在這些介面上的摺疊展示是受限的。

在條目空間使用折疊功能的指導思想是：摺疊功能不可用時，必须不影響該條目的知識完整性；被摺疊部分本身对于条目的完善、阅读有辅助价值。

所有在条目空间出现的摺疊块应当是noprint的，即不可打印。

以下是一些可接受的使用摺疊的方面：

• 未完成的、中文读者还不能阅读的、没有形成有效知识的内容（比如未翻譯成中文的文字、短时间内正在撰写的不成型段落、可疑无来源的文字）
• 与该条目相關的主題導航
• 對多數讀者不適的內容和圖片（該內容圖片不影響條目的完整性）
• 閱讀指導，包括字詞轉換說明、免責說明等
• 自我参照的内容，比如站務維護指示

實現基礎

注意：中文維基百科是獨立實現的摺疊，與其它維基媒體專案的摺疊功能在語法上有細小差異。

閱讀這一節的內容要求你有一定的HTML和CSS基礎知識，透過在原始碼中設定特定的class（HTML屬性）值，就可以實現指定版面的可摺疊性。

MediaWiki:Common.js中的javascript腳本会自動完成相關的DHTML動作。

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

定義摺疊塊

• div.NavFrame 或 table.collapsible ：指示該區域或表格是可折疊的，該值是实现某元素的折叠功能所必須的。

折叠块	折叠表格
<div class="NavFrame">...</div>	<table class="collapsible">...</table>	{| class="collapsible" 這里放置表格的 wiktext 語法 |}

• div.collapsed 或 table.collapsed ：指示該摺疊塊的初始狀態是已摺疊的，如果沒有設定該值，則摺疊塊的預設初始狀態是展開的。以下两种折叠块都可以透過點擊進行摺疊和展開。

設定了 collapsed

展開的文字

沒有設定 collapsed

展開的文字

• div.autocollapse 或 table.autocollapse ：指示該摺疊塊的初始狀態是否摺疊由該頁面的可摺疊塊數量控制。如果有2個及以上的摺疊塊，則自動摺疊塊就摺疊，否則自動摺疊塊展開。

定義摺疊標題

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

折叠块使用例

定義摺疊標題主要是針對div摺疊塊的，透過在div.NavFrame中放置一個div.NavHead元素，則這個div.NavHead元素就變成摺疊標題供點擊。

<div class="NavFrame collapsed"><div class="NavHead">設定了 collapsed</div><div class="NavContent"><center>展開的文字</center></div></div>

設定了 NavHead

展開的文字

如果在 div.NavFrame 中沒有設定 div.NavHead，則該摺疊塊將沒有摺疊標題，因此隐藏的内容无法显示。

<div class="NavFrame collapsed"><div>没有設定 collapsed</div><div class="NavContent"><center>展開的文字</center></div></div>

没有設定 NavHead

展開的文字

表格用例

至於table，系統自動將表格的第一行（并且該行有標題單元）作為摺疊標題。如果在 table.collapsible 中第一行沒有標題單元格，則該摺疊塊將沒有摺疊標題。

代码	效果
{| class="collapsible collapsed" |- ! 第一行 |- | 第二行 |}	第一行 第二行
{| class="collapsible collapsed" |- | 第一行 |- | 第二行 |}	第一行 第二行

新摺疊效果

新的摺疊效果並不是中文維基百科開發的，而是由一些外語wiki社群開發，中文維基百科再採用。以下各項均可加入 mw-collapsed 以实现預設隱藏。

代碼及顯示	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> @ 點選這裡或任何@來打開或隱藏。 title=Click me! ⇐ @@這裡或圖片都可以打開@@ 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	每頁面只可用一次，宜使用更簡單的表格代碼