更好的行内折叠 组件

模块暂不可用: 此动态功能尚未由只读迁移站支持。

WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:v2para)

Rating: +40

概述

本组件是对行内折叠模块的改进,不过基于定向改造的定向内容显隐而非传统的多重折叠模块,移除了原行内折叠按钮两侧的 空格 并提供了更多的自定义空间。

使用方法

+ 点击展开参数列表- 点击隐藏

默认值不是的参数都是可选的!

参数效果可接受值默认值
incol激活基础模式--]
incol-start激活进阶模式头--]
incol-end激活进阶模式尾--]
show展开按钮文本任意字符串显示
hide隐藏按钮文本任意字符串{$show}
before折叠前共用文本任意字符串
after折叠后共用文本任意字符串
coltext1展开前文本-按钮前任意字符串
coltext2展开前文本-按钮后任意字符串
coltext3展开后文本-按钮前任意字符串
coltext4展开后文本-按钮后任意字符串
content折叠内容任意字符串
cont折叠内容任意字符串
fold是否默认折叠内容y/noy

基础模式

直接引用本组件不会对页面产生任何影响,启用参数incol激活组件的基础模式:

[[include :scp-wiki-cn:component:incol incol=--]]]

基础模式下,组件结构如下:
折叠前共用文本(before)展开前文本1(coltext1)展开按钮文本(show)展开前文本2(coltext2)折叠后共用文本(after)
折叠前共用文本(before)展开后文本1(coltext3)隐藏按钮文本(hide)展开后文本2(coltext4)折叠后共用文本(after)
折叠内容(content)

扩展模式

扩展模式用于容纳部分与include冲突的需换行语法,先放入组件头:

[[include :scp-wiki-cn:component:incol incol-start=--]
|before=折叠前共用文本
|show=展开按钮文本
|hide=隐藏按钮文本
|coltext1=展开前文本1
|coltext2=展开前文本2
|coltext3=展开后文本1
|coltext4=展开后文本2
|after=折叠后共用文本]]

然后写入任何你希望的内容,在内容结束后加入组件尾:

[[include :scp-wiki-cn:component:incol incol-end=--]]]

示例

基础折叠基础行内折叠扩展示例

[[include :scp-wiki-cn:component:incol incol=--]
|show=点击这里可以展开——
|hide=点击隐藏
|coltext1=文本可以应用部分[[span style="color: red"]]维基语法[[/span]]!
|coltext2=也可以插入@@[*https://scpper.mer.run/ 链接]@@
|coltext3=设置为@@@@便可以隐藏该项内容
|coltext4=@@@@
|before=-这段文本在折叠前一直显示-
|after=。
|content=附加折叠内容]]


WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:incol-backend)

注意事项

  • 由于未解决的技术问题,在编辑预览模式下组件生成的折叠按钮可能会无响应,保存页面后便不会有此问题。
  • 由于[[module CSS]]的局限,初次引用本组件的页面在保存前无法预览组件内容,保存页面即可。

组件源代码

WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:incol-backend)

详见组件后端
css
/* 逻辑主体 */
.hide-y > * > .folded > :is(.foldable-list-container, .etster) > .ab,
.hide-y > * > .unfolded > :is(.foldable-list-container, .etster) > .af,
.hide-no > * > .unfolded > :is(.foldable-list-container, .etster) > .ab,
.hide-no > * > .folded > :is(.foldable-list-container, .etster) > .af,
.foldable-cont .ab > span,
.foldable-cont .af > span,
.foldable-content > br:first-child,
.hide-y > * > .folded > .foldable-content,
.hide-no > * > .unfolded > .foldable-content {
    display: none;
}

.foldable-cont :is(.ab, .af) > span:is(.s, [style*=":"]) {
    display: inline;
}

.foldable-cont :is(ul, li) {
    display: block !important;
    line-height: normal;
    list-style: none;
    margin: 0;
    padding: 0;
}

.foldable-cont .foldable-list-container, .foldable-cont .etster {
    pointer-events: none;
    user-select: none;
}

.foldable-cont .etster {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.foldable-cont .etster > :is(.af, .ab),
.foldable-cont .foldable-list-container .ftext {
    visibility: hidden;
}

.foldable-cont .etster .ftext, .foldable-list-container :is(.af, .ab) a {
    pointer-events: all;
    -webkit-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
}
[!-- 折叠相关 --]
[!--{$incol}
[[div_ class="foldable-cont hide-{$fold}"]]
[[ul]][[li class="folded" style="position: relative;"]]
[[div_ class="etster"]]
[[span class="ftext"]]{$before}[[/span]][[span class="af" style="visibility: hidden;"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="s"]]{$show}[[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab" style="visibility: hidden;"]]{$coltext3}[[span class="s"]]{$hide}[[/span]]{$coltext4}[[/span]][[span class="ftext" style="visibility: hidden;"]]{$after}[[/span]]
[[/div]]
[[div_ class="foldable-list-container"]]
[[span class="ftext"]]{$before}[[/span]][[span class="af"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="{$show} s"]][# {$show}][[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab"]][[span style="user-select: text"]]{$coltext3}[[/span]][[span class="{$hide} s"]][# {$hide}][[/span]][[span style="user-select: text"]]{$coltext4}[[/span]][[/span]][[span class="ftext"]]{$after}[[/span]][[/div]]
[[div_ class="etster"]]
[[span class="ftext" style="visibility: hidden;"]]{$before}[[/span]][[span class="af" style="visibility: hidden;"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="s"]]{$show}[[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab"]][[span style="user-select: text"]]{$coltext3}[[/span]][[span class="s"]]{$hide}[[/span]][[span style="user-select: text"]]{$coltext4}[[/span]][[/span]][[span class="ftext"]]{$after}[[/span]]
[[/div]]
[[div_ class="foldable-content"]]
@@@@
{$content}
[[/div]][[/li]][[/ul]]
[[/div]]
[!----]
[!--{$incol-start}
[[div_ class="foldable-cont hide-{$fold}"]]
[[ul]][[li class="folded" style="position: relative;"]]
[[div_ class="etster"]]
[[span class="ftext"]]{$before}[[/span]][[span class="af" style="visibility: hidden;"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="s"]]{$show}[[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab" style="visibility: hidden;"]]{$coltext3}[[span class="s"]]{$hide}[[/span]]{$coltext4}[[/span]][[span class="ftext" style="visibility: hidden;"]]{$after}[[/span]]
[[/div]]
[[div_ class="foldable-list-container"]]
[[span class="ftext"]]{$before}[[/span]][[span class="af"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="{$show} s"]][# {$show}][[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab"]][[span style="user-select: text"]]{$coltext3}[[/span]][[span class="{$hide} s"]][# {$hide}][[/span]][[span style="user-select: text"]]{$coltext4}[[/span]][[/span]][[span class="ftext"]]{$after}[[/span]][[/div]]
[[div_ class="etster"]]
[[span class="ftext" style="visibility: hidden;"]]{$before}[[/span]][[span class="af" style="visibility: hidden;"]][[span style="user-select: text"]]{$coltext1}[[/span]][[span class="s"]]{$show}[[/span]][[span style="user-select: text"]]{$coltext2}[[/span]][[/span]][[span class="ab"]][[span style="user-select: text"]]{$coltext3}[[/span]][[span class="s"]]{$hide}[[/span]][[span style="user-select: text"]]{$coltext4}[[/span]][[/span]][[span class="ftext"]]{$after}[[/span]]
[[/div]]
[[div_ class="foldable-content"]]
@@@@
[!----]
[!--{$incol-end}
[[/div]][[/li]][[/ul]]
[[/div]]
[!----]

WikiJump include 未展开: 跨站引用未启用(:g2lighter:component:incol-backend)

页面版本:⁨0⁩, 最后编辑于: ⁨2026/8/26 14:21:37⁩ (⁨⁨21⁩ 日前⁩), 现时评分: 40