本文介绍如何使用MediaWiki内置的JQuery解决方案来实现折叠内容。默认的navbox中已经集成了此功能。

版本

本功能需要MediaWiki版本在1.18之上。

简单折叠

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

<div class="darken mw-collapsible" style="width:40em;">
折叠文字 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="{{int:show}}" data-collapsetext="{{int:hide}}">

指定折叠状态

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

指定折叠部分

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

结果:

折叠按钮A

折叠的内容

折叠按钮B

应用实例

模板例子

The Gettysburg Address
Four score and seven years ago our forefathers brought forth on this continent
青玉案·元夕
东风夜放花千树。更吹落,星如雨。
卜算子
缺月挂疏桐,漏断人初静
avatar