For faster navigation, this Iframe is preloading the Wikiwand page for Help:摺疊顯示.

Help:摺疊顯示

}-

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

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

摺疊模板[编辑]

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

((hideH|通用摺疊))摺疊內容((hideF))
((delH|關閉刪除投票))刪除討論內容((delF))
((Talkendh|關閉保护页面、破坏等请求(完成与未完成)))刪除討論內容((Talkendf))
((talkH|關閉無關討論))討論內容((talkF))

((TransH))非中文文字((TransF))

注意:((delH))重定向至((Talkendh)),((delF))、((Talkendf))、((TransF))重定向至((hideF)),其余参見Category:摺疊模板

相關方针[编辑]

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

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

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

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

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

實現基礎[编辑]

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

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

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

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

定義摺疊塊

  • div.NavFrametable.collapsible :指示該區域或表格是可折疊的,該值是实现某元素的折叠功能所必須的。
折叠块 折叠表格
<div class="NavFrame">...</div>
<table class="collapsible">...</table>
{|
class="collapsible"
這里放置表格的 wiktext 語法
|}
  • div.collapsedtable.collapsed :指示該摺疊塊的初始狀態是已摺疊的,如果沒有設定該值,則摺疊塊的預設初始狀態是展開的。以下两种折叠块都可以透過點擊進行摺疊和展開。
  • div.autocollapsetable.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>

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

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

表格用例

至於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>
  1. One
  2. Two is more than one
  3. ..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!
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
普通行030
mw-customtoggle, mw-customcollapsible, mw-collapsible mw-collapsed 每頁面只可用一次,宜使用更簡單的表格代碼
{{bottomLinkPreText}} {{bottomLinkText}}
Help:摺疊顯示
Listen to this article

This browser is not supported by Wikiwand :(
Wikiwand requires a browser with modern capabilities in order to provide you with the best reading experience.
Please download and use one of the following browsers:

This article was just edited, click to reload
This article has been deleted on Wikipedia (Why?)

Back to homepage

Please click Add in the dialog above
Please click Allow in the top-left corner,
then click Install Now in the dialog
Please click Open in the download dialog,
then click Install
Please click the "Downloads" icon in the Safari toolbar, open the first download in the list,
then click Install
{{::$root.activation.text}}

Install Wikiwand

Install on Chrome Install on Firefox
Don't forget to rate us

Tell your friends about Wikiwand!

Gmail Facebook Twitter Link

Enjoying Wikiwand?

Tell your friends and spread the love:
Share on Gmail Share on Facebook Share on Twitter Share on Buffer

Our magic isn't perfect

You can help our automatic cover photo selection by reporting an unsuitable photo.

This photo is visually disturbing This photo is not a good choice

Thank you for helping!


Your input will affect cover photo selection, along with input from other users.

X

Get ready for Wikiwand 2.0 🎉! the new version arrives on September 1st! Don't want to wait?