帮助:折叠显示
 | 应当尽量使用MediaWiki内建的mw-collapsiblemw-collapsed及mw-collapsible-contentCSS类，避免使用过时的NavFrame。 |
在中文维基百科，折叠显示应用在很多条目的导航模板、讨论页等地方，透过滑鼠的点击就可以展开和收缩一些版面，以方便读者进行导航阅读。
此外，中文维基百科在2011年7月引入了新的折叠效果，其客制性更强，有关详情参见#新折叠效果。
折叠模板[编辑]
为了方便wiki编辑的使用，下面例举了一些常用的有折叠功能的模板。至于它们的实现基础，放在最下方说明，以供有兴趣研究它的维基人。
((hideH|通用摺疊))摺疊內容((hideF))
((delH|關閉刪除投票))刪除討論內容((delF))
((Talkendh|關閉保护页面、破坏等请求（完成与未完成）))刪除討論內容((Talkendf))
((talkH|關閉無關討論))討論內容((talkF))
((TransH))非中文文字((TransF))
注意：((delH))重定向至((Talkendh))，((delF))、((Talkendf))、((TransF))重定向至((hideF))，其余参见Category:折叠模板。
相关方针[编辑]
折叠功能在主条目空间和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>
如果在 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>
|
mw-collapsible mw-collapsed | 这个有时候需要较深的HTML代码，正常理应使用简单的wikitable代码。 | ||||||||||||||||||
<ul class="mw-collapsible"> <li>Lorem <li>Ipsum <li>Dolor </ul>
|
mw-collapsible | 可以使用较简单的代码 | ||||||||||||||||||
<ol class="mw-collapsible"> <li>One <li>Two is more than one <li>..a total of three items! </ol>
|
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
|}
点此折叠表格
|
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> 折叠列表
|
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>
|
mw-customtoggle, mw-customcollapsible, mw-collapsible mw-collapsed | 每页面只可用一次，宜使用更简单的表格代码 |
| |||||||||||||||||||||||||||||||||||||
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.
