Help:折叠显示

来自神奇宝贝百科

神奇宝贝百科在一些条目和模板中都应用了折叠显示功能,它可以通过鼠标的点击来展开和收缩一些版面,便于读者快速检索内容,或便于排版。

当在页面中發現“[显示]”或“[隐藏]”字样,就意味着这里使用了折叠显示功能,可以点击字样显示或隐藏相关内容。

推荐的方式

推荐使用MediaWiki内置的jQuery解决方案来实现折叠内容。本章节的内容来自灰机wiki

简单折叠

在Html元素(div、span、table等)上添加一个名为mw-collapsible的类(class)

<div class="mw-collapsible" style="width:60em;">折叠文字 Four score and seven years ago our forefathers brought forth on this continent</div>
结果:
折叠文字 Four score and seven years ago our forefathers brought forth on this continent


自定义按钮文字

  • data-expandtext:展开文字,默认为“展开”
  • data-collapsetext:折叠文字,默认为“折叠”
<div class="mw-collapsible" data-expandtext="打开我" data-collapsetext="关闭我" style="width:20em;">欢迎来到神奇宝贝百科</div>
结果:
欢迎来到神奇宝贝百科


指定折叠状态

  • mw-collapsed :通过添加这个类在一个元素上使之默认为“折叠”状态
  • mw-collapsible:通过添加这个类在一个元素上使之默认为“展开”状态

指定折叠部分

  • mw-collapsible-content:通过添加这个类在一个元素上使之成为自定义的折叠内容部分
<div class="mw-collapsible mw-collapsed" style="width:60em;">
这里的文字不会被折叠 
<div class="mw-collapsible-content">折叠文字 Four score and seven years ago our forefathers brought forth on this continent</div>
</div>
结果:

这里的文字不会被折叠

折叠文字 Four score and seven years ago our forefathers brought forth on this continent


自定义折叠按钮

  • mw-customtoggle-<自定义名字>:通过添加这个类在一个元素上使之成为折叠按钮,并在折叠内容所在的元素上添加同名的ID属性来控制折叠内容,此时折叠内容应添加mw-collapsedmw-collapsible类。
    • 【注意】由于html元素ID名字之中的汉字会被转义为%文字,因此<自定义名字>部分务必是英文,否则会导致折叠功能无法正常使用。
<span class="mw-customtoggle-huiji">折叠按钮A</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-huiji">折叠的内容</div>
<span class="mw-customtoggle-huiji">折叠按钮B</span>
结果:

折叠按钮A

折叠的内容

折叠按钮B

<div class="mw-collapsible mw-customtoggle-NoWorldcollapse" id="mw-customcollapsible-NoWorldcollapse">'''折叠(点我)'''</div>
<div class="mw-collapsible mw-collapsed mw-customtoggle-NoWorldcollapse" id="mw-customcollapsible-NoWorldcollapse">'''展开(点我)'''</div>
结果:
折叠(点我)
展开(点我)


特殊情况

折叠内容后有标题:
<div class="mw-collapsible" style="width:60em;">折叠文字 Four score and seven years ago our forefathers brought forth on this continent</div>
== 我是标题 ==
此时应在折叠内容与标题之间加{{-}}以消除折叠内容对标题的影响,即:
<div class="mw-collapsible" style="width:60em;">折叠文字 Four score and seven years ago our forefathers brought forth on this continent</div>
{{-}}
== 我是标题 ==

表格折叠

这个功能是通过MediaWiki:Common.js页面中的相关代码实现的。

代码

{| class="collapsed collapsible"
! 不折叠的内容
|-
| 折叠的内容
|}
  • 以上代码会显示为:

使用说明

  • 表格折叠功能只能在表格中使用,通过添加class类实现。
  • 表头中添加collapsible类就可以为之增加折叠功能。
    • 在行、单元格上添加则无效
    • 添加collasped类则其默认为隐藏状态。
  • [显示]或[隐藏]字样会出现在第一个前注标为“!”的单元格上,例如:
{| class="collapsed collapsible bluetable" <!--bluetable为美化使用,并非功能内容-->
| 第一格
| 第二格
! 第一个标为叹号的格
|-
| colspan=3 | 被隐藏的内容
|}
就会显示为:
  • 标记“!”的单元格必须位在首行,若在其他行则无效。