萌娘百科衷心希望新型冠状病毒肺炎疫情早日结束! | 创建原型类条目前请阅读关于原型类条目收录方针变动的公告
针对音乐条目收录范围的修正案(2021.02.20)正在讨论中,欢迎参与!
  • 你好~!欢迎来到萌娘百科!如果您是第一次来到这里,点这里加入萌娘百科!
  • 欢迎具有翻译能力的同学~有意者请点→Category:需要翻译的条目
  • 如果您在萌娘百科上发现某些内容错误/空缺,请勇于修正/添加!编辑萌娘百科其实很容易!
  • 觉得萌娘百科有趣的话,请推荐给朋友哦~
  • 萌娘百科群119170500欢迎加入,加入时请写明【萌娘百科+自己的ID】~
  • 萌娘百科Discord群组已经建立,请点此加入!

帮助:折叠

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳转至: 导航搜索
Commons-emblem-notice.svg
这个页面“Help:折叠”是萌娘百科的帮助文档
  • 本文用于介绍萌娘百科中一些特定功能的操作方法;
  • 本文仅是一篇论述,不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况,请以方针或指引的条文为准。

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

简单折叠

在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"><span style="color:#414141;">'''折叠(点我)'''</span></div>
<div class="mw-collapsible mw-collapsed mw-customtoggle-NoWorldcollapse" id="mw-customcollapsible-NoWorldcollapse"><span style="color:#414141;">'''展开(点我)'''</span></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}}
== 我是标题 ==