本页面之全部或部分原来自灰机wiki的
帮助:折叠
,依
CC BY-NC-SA 3.0
授权引入;原贡献者可以在
这里
看到。
经过双方编者的修改,本页面可能已与来源有很大差异。
这个页面
“Help:折叠”
是萌娘百科的
帮助文档
-
本文用于介绍萌娘百科中一些特定功能的操作方法;
-
本文仅是一篇论述,不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况,请以方针或指引的条文为准。
请避免在
主名字空间
中对大段内容乃至整个条目应用此功能
,以免影响不熟悉其运作机制的用户的阅读体验。
本文介绍如何使用MediaWiki内置的jQuery解决方案来实现折叠内容。默认的
Navbox模板
中已经集成了此功能。
1
简单折叠
2
自定义按钮文字
3
指定折叠状态
4
指定折叠部分
5
自定义折叠按钮
6
特殊情况
在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>
这里的文字不会被折叠
折叠文字 Four score and seven years ago our forefathers brought forth on this continent
自定义折叠按钮
除娱乐用途外,请尽量保证折叠按钮易于辨认。
mw-customtoggle-<自定义名字>
:通过添加这个类在一个元素上使之成为折叠按钮,并在折叠内容所在的元素上添加同名的ID属性来控制折叠内容,此时折叠内容应添加mw-collapsed
、mw-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>
== 我是标题 ==
- 此时应在折叠内容与标题之间加{{clear}}以消除折叠内容对标题的影响,即:
<div class="mw-collapsible" style="width:60em;">折叠文字 Four score and seven years ago our forefathers brought forth on this continent</div>
{{clear}}
== 我是标题 ==