mw-collapsible
类可使任意元素可折叠,但使表格可折叠尤为简单。将mw-collapsible
类添加到表格中会自动定位切换按钮,并选择要折叠的部分。
一种常见用途是制作一个可折叠的布局表格,它始终显示简介或摘要,但隐藏其余内容,不让用户直接看到。简介或摘要位于第一行,内容位于后续行,使用“展开”按钮即可轻松访问其内容。
在下面的示例中,wikitable
类的使用仅仅是为了外观,它不是让mw-collapsible
起作用所必须的。
输入代码 |
输出内容
|
{| role="presentation" class="wikitable mw-collapsible"
| <strong>千字文</strong>
|-
| 天地玄黄,宇宙洪荒。日月盈昃,辰宿列张。
|}
|
|
更复杂的数据表格也可以折叠。
输入代码 |
输出内容
|
{| class="wikitable mw-collapsible"
|+ class="nowrap" | 冬季奥林匹克运动会
|-
|
! scope="col" | 国家/地区
! scope="col" | 城市
|-
! scope="row" | 1994年
| 挪威 || 利勒哈默尔
|-
! scope="row" | 1998年
| 日本 || 长野
|}
|
冬季奥林匹克运动会
|
国家/地区
|
城市
|
1994年
|
挪威 |
利勒哈默尔
|
1998年
|
日本 |
长野
|
|
仅使用mw-collapsible
类会使元素默认展开,但读者可以将其折叠。也可以通过随mw-collapsible
添加其他类使元素默认折叠并可选择展开。有以下方法可以执行此操作,具体取决于用户希望元素折叠的情况。但是,根据MOS:DONTHIDE,内容不应默认折叠。
添加类值mw-collapsed
将使元素始终处于初始折叠状态,无论其周围发生什么,这是最简单的方法。使用上述示例:
输入代码 |
输出内容
|
{| role="presentation" class="wikitable mw-collapsible mw-collapsed"
| <strong>千字文</strong>
|-
| 天地玄黄,宇宙洪荒。日月盈昃,辰宿列张。
|}
|
|
{| class="wikitable mw-collapsible mw-collapsed"
|+ class="nowrap" | 冬季奥林匹克运动会
|-
|
! scope="col" | 国家/地区
! scope="col" | 城市
|-
! scope="row" | 1994年
| 挪威 || 利勒哈默尔
|-
! scope="row" | 1998年
| 日本 || 长野
|}
|
冬季奥林匹克运动会
|
国家/地区
|
城市
|
1994年
|
挪威 |
利勒哈默尔
|
1998年
|
日本 |
长野
|
|
使用此技术将导致页面重排或跳转,通常情况下应避免。
如果页面上有一个以上可折叠元素,则添加类值autocollapse
会使元素折叠。所以,下面的示例会折叠,因为该页面包含许多可折叠元素。
输入代码 |
输出内容
|
{| role="presentation" class="wikitable mw-collapsible autocollapse"
| <strong>千字文</strong>
|-
| 天地玄黄,宇宙洪荒。日月盈昃,辰宿列张。
|}
|
|
"innercollapse"和"outercollapse"
编辑
使用此技术将导致页面重排或跳转,通常情况下应避免。
使用这对类,可以使元素仅在包含在特定的外部元素中时才默认折叠。如果一个具有mw-collapsible
和innercollapse
类的元素包含在具有outercollapse
类的元素中,则该元素会默认折叠;反之,则默认不会折叠该元素。这主要用于模板中,因为模板是嵌入包含的。
输入代码 |
输出内容
|
{| role="presentation" class="wikitable mw-collapsible innercollapse"
| 此<code>innercollapse</code>元素
|-
| 默认'''未折叠'''
|}
<div class="wikitable outercollapse" style="padding:1em; background:#ccc;">
这是一个具有<code>outercollapse</code>类的元素
{| role="presentation" class="wikitable mw-collapsible innercollapse"
| 此<code>innercollapse</code>元素
|-
| 默认'''折叠'''
|}
</div>
|
|
没有标题的表格将折叠到第一行。有标题的表格将折叠到其标题,没有行,所以没有宽度。使用class="nowrap"
或{{nowrap}}
可防止标题在表格折叠时被挤压到垂直列中。
输入代码
|
输出内容
|
{|class="wikitable sortable mw-collapsible"
|+ class="nowrap" | 有点长的表格标题
! 姓名 !! 分数
|-
| 张三 || 59
|-
| 李四 || 72
|}
|
有点长的表格标题
姓名 |
分数
|
张三 |
59
|
李四 |
72
|
|
下面的示例使用{{nowrap}}
并以末尾括号作为换行点,<style=max-width:Xem;
将不起作用。
输入代码
|
输出内容
|
{|class="wikitable sortable mw-collapsible"
|+ {{nowrap|较长的表格标题需要换行}}适用于移动设备
! 姓名 !! 分数
|-
| 张三 || 59
|-
| 李四 || 72
|}
|
较长的表格标题需要换行适用于移动设备
姓名 |
分数
|
张三 |
59
|
李四 |
72
|
|
可折叠表格可以毫无困难地与可排序表格功能结合使用。但是,由于展开/折叠按钮位于mw-collapsible
第一行最右侧的单元格中,如果单元格不够宽,其定位可能看起来有点奇怪:
输入代码
|
输出内容
|
{|class="wikitable mw-collapsible sortable" style="width:5em"
<!--表格宽度太窄,这是有意而为之-->
|-
! 姓名 !! 分数
|-
| 张三 || 59
|-
| 李四 || 72
|}
|
|
一个可用的替代方案是在表格上方添加标题,参见下面的示例:
输入代码
|
输出内容
|
{|class="wikitable sortable mw-collapsible"
|+ class="nowrap" | 标题
! 姓名 !! 分数
|-
| 张三 || 59
|-
| 李四 || 72
|}
|
|
- 此功能要求最终用户的浏览器启用JavaScript。如果禁用JavaScript,则默认行为是显示内容。