帮助:折叠显示 - Wikiwand
For faster navigation, this Iframe is preloading the Wikiwand page for 帮助:折叠显示.

帮助:折叠显示

维基百科，自由的百科全书

快捷方式

在中文维基百科，折叠显示应用在很多条目的导航模板、讨论页面等地方，透过鼠标的点击就可以展开和收缩一些版面，以方便读者进行导航阅读。

此外，中文维基百科在2011年7月引入了新的折叠效果，其客制性更强，有关详情参见#新折叠效果。

折叠模板

为了方便维基编辑的使用，下面例举了一些常用的有折叠功能的模板。至于它的实现基础，放在最下方说明，以供有兴趣研究它的维基人。

  • {{delH|关闭删除投票}}
    删除讨论内容
    {{delF}}
  • {{Talkendh|关闭保护页面、破坏等请求（完成与未完成）}}
    删除讨论内容
    {{Talkendf}}

注意：{{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设置。

下方是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
这是展开的文字。
  • 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>這是展開的文字。</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>
  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!
⇐ @@这里或图片都可以打开@@

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 每页面只可用一次，宜使用更简单的表格代码

以上各项可加入mw-collapsed来默认隐藏。

阅读
账户与设定
跟踪更改
编辑
高级
姊妹计划帮助页面
{{bottomLinkPreText}} {{bottomLinkText}}
This page is based on a Wikipedia article written by contributors (read/edit).
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.
Cover photo is available under {{::mainImage.info.license.name || 'Unknown'}} license. Cover photo is available under {{::mainImage.info.license.name || 'Unknown'}} license. Credit: (see original file).
帮助:折叠显示
Listen to this article