手册:可折叠元素
jQuery.makeCollapsible
请参阅jQuery.makeCollapsible文档来了解关于该功能生效方式的更多信息。
从MediaWiki 1.18以及更高版本起，此模块默认包含在MediaWiki 核心中。 此模块默认随MediaWiki一起提供。 你并不需要将其复制进wiki中。 The source (if you're interested) is in the repository for mediawiki-core (resources/src/jquery/jquery.makeCollapsible.js and resources/src/jquery/jquery.makeCollapsible.css).
给任意元素（div、table、list等任何元素）加入mw-collapsible类以启用。
在移动版上不生效（phab:T111565）。
表格
表格可以像任何其他元素一样折叠。 区别是，表格的部分内容会保持显示，即使已经被折叠。 带有表格标题（caption）的标题会保持表格标题可见：
{| class="mw-collapsible"
|+ Caption
|-
! scope="col" | Header 1
! scope="col" | Header 2
|-
| Data 1
| Data 2
|}
| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
A table without a caption keeps the first row visible:
{| role="presentation" class="mw-collapsible"
|-
| Lorem
| ipsum
|-
| dolor
| sit
|}
结果：
| Lorem | ipsum |
| dolor | sit |
指定初始状态
You can add mw-collapsed after mw-collapsible to have the content collapsed by default when you load the page.
To set the initial state as collapsed add "mw-collapsed", such as seen in the following table:
{| class="mw-collapsible mw-collapsed wikitable"
! colspan="2" | The header remains visible.
|-
| This content || is hidden
|-
| at first || load time
|}
| The header remains visible. | |
|---|---|
| This content | is hidden |
| at first | load time |
{| class="mw-collapsible mw-collapsed wikitable"
|+ style=white-space:nowrap | The caption remains visible.
|-
! Text !! More text
|-
| This content || is hidden
|-
| at first || load time
|}
| Text | More text |
|---|---|
| This content | is hidden |
| at first | load time |
You can add a padded border around the caption to make it easier to see that it is a collapsed table:
|+ style="white-space:nowrap; border:1px solid; padding:3px;" | The caption remains visible.
| Text | More text |
|---|---|
| This content | is hidden |
| at first | load time |
简单
<!-- overflow:auto; to fix collapsed display, because the toggle link has float:right; -->
<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
This text is collapsible. {{Lorem}}
</div>
结果：
Using the data-collapsetext and data-expandtext attributes one can define a custom text for the toggle labels added by the script.
When added in wikitext these could be populated by a localized message like:
<div class="mw-collapsible" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}">
简单带有标题
<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Lorem ipsum sample</div>
<div class="mw-collapsible-content">
This text is collapsible. {{Lorem}}
</div></div>
结果：
带有指定的可折叠部分
By default, a collapsible non-table element collapses completely.
To keep some content visible, even when collapsed, you can specify which part is the collapsible content.
<div class="toccolours mw-collapsible mw-collapsed">
This text is not collapsible; but the next is collapsible and hidden by default:
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>
结果：
This text is not collapsible; but the next is collapsible and hidden by default:
带有自定义的开关链接
If you don't want the script to put the default toggle link (whether or not with a custom label) in your element, you can make one of your own.
This could reside anywhere inside or outside the collapsible element.
Its relationship to the collapsible element is detected by using an ID attribute with the prefix mw-customcollapsible and a corresponding class attribute with prefix mw-customtoggle for the collapsible element and the togglelink respectively.
<span class="mw-customtoggle-myDivision">Toggle link</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">Toggled text</div>
<span class="mw-customtoggle-myDivision">Additional toggle link</span>
结果：
Toggle link
Additional toggle link
Inside another element
You can also use collapsible elements in other elements, such as a table.
| Title | Sample | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Lorem | Ipsum | ||||||||
| More info |
|
将开关移到左边
Wide images and long bare URLs in collapsible tables or elements can cause the toggle link to go offscreen to the right when expanded. In cell phones for example. Sometimes it is difficult or impossible to get over to the toggle link to click it and close it. The following CSS puts the toggle link all the way to the left, and leaves a little space between it and the text to its right. The toggle link position does not change as the table or element is expanded or collapsed. Place the CSS in common.css by editing page "MediaWiki:common.css". Also edit mobile.css if you are importing jquery.makeCollapsible into mobile.js. For examples see common.css, mobile.js, and mobile.css
/* Collapsible elements. Toggle-link moved to left.
/* Margin around it adjusted. */
.mw-collapsible span.mw-collapsible-toggle {
float:left;
margin-left:0;
margin-right:1em;
}
Removing brackets from the toggle
If you want to hide the brackets in the default or custom label toggle links (for aesthetic or other reasons):
.mw-collapsible-toggle-default:before, .mw-collapsible-toggle-default:after {
display: none;
}