定向内容显隐 组件

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

WikiJump include 未展开： 跨站引用未启用（:g2lighter:component:v2para）

注意，您现在使用的是不支持:has()选择器的老旧浏览器！

Rating: +69

概述

本组件用于定向显隐页面内内容。使用本组件在页面的任意位置插入一个或多个开关后，便可以通过点击它们来切换与其绑定的元素的显示状态，效果类似为没有位置和目标数量限制的[[collapsible]]。

WikiJump include 未展开： 跨站引用未启用（:g2lighter:component:content-hider-backend）

使用方法

刚才就是一个定向显隐的例子。它是这样实现的：

[[include :scp-wiki-cn:component:content-hider id=example
|showText=这里
|hideText=@@@@
|beforeText=比如，下面看不清的内容，点击
|afterText=就可以看清了！
|mode=blur
|blur=5]]
+ 使用方法
[[div class="example"]]
被隐藏的文字
[[/div]]

首先，通过以下格式在页面内插入开关并定义一个基础标识符：

[[include :scp-wiki-cn:component:content-hider id=指定的标识符
|showText=
|hideText=
|更多参数…]]

WikiJump include 未展开： 跨站引用未启用（:g2lighter:component:content-hider-backend）

参数名称效果可接受值默认值
id必要参数，指定开关标识符任意字符串无
showText显示用按钮文本任意字符串显示
hideText隐藏用按钮文本任意字符串隐藏
beforeText按钮前方文本任意字符串无
afterText按钮后方文本任意字符串无
hide指定是否默认隐藏noy
mode指定开关默认隐藏方式del/opa/blur/cendel
opacity指定以opa方式隐藏的元素的透明度百分比数/0~1小数0
blur指定以blur模式隐藏的元素的模糊度任意正实数3
select-more指定隐藏范围为携带标识符的元素的父元素*无
select-less指定隐藏范围为携带标识符的元素的子元素*无
extraclass为样式设计预留，为开关赋予额外类名任意字符串无
hover-fallback启用实验性回退*无

WikiJump include 未展开： 跨站引用未启用（:g2lighter:component:content-hider-backend）

模式效果描述
deldel模式通过将元素移除出文档流隐藏元素
opaopa模式通过让元素透明化隐藏元素
blurblur模式通过让元素模糊隐藏元素
cencen模式通过模拟黑条隐藏元素

之后，在页面内通过给元素赋予标识符将其与开关关联，示例：

[[span class="指定的标识符"]]内容[[/span]]
或者使用有一定局限的简写格式：##指定的标识符|内容##（此时标识符必须仅为字母、数字或连字符的组合）

此时点击开关便可切换与之关联的内容的显隐。

在赋予标识符时加上-del/-opa/-blur/-cen可以覆盖开关的默认隐藏方式，详见示例中的“同开关异效果示例”。

在赋予标识符时在标识符末尾加入-r后缀可以使开关对该元素的作用被逆转，详见示例中的“切换器示例”。

亦可以在页面插入多个开关以实现更复杂的效果，只需多次引入组件即可。

示例

单开关多开关切换器示例同开关异效果示例

[[include :scp-wiki-cn:component:content-hider id=单开关
|showText=显示隐藏内容
|hideText=隐藏内容]]
[[span class="单开关"]]第一处隐藏文本，处在行中[[/span]]

中间可以隔开任意元素

[[div class="单开关"]]
第二处隐藏文本，包在一个块（div）中
[[/div]]

[[collapsible show="显示隐藏内容" hide="隐藏内容" folded="{$hide}"]]
[[/collapsible]]

第一处隐藏文本，处在行中

中间可以隔开任意元素

第二处隐藏文本，包在一个块（div）中

注意事项

  1. 本组件使用:has()判断器，在同一页面过多引入开关会导致潜在的页面性能问题……不过也不会有人在同一个页面塞几百个折叠吧？
    • 相关选择器权重为(0, 4, 0)，在为其它组件赋予标识符时请测试以免出现不必要的样式冲突。
  2. 本组件使用了[[collapsible]]作为开关，请勿开关插入在其它折叠块中！
    • 如有需要，可以使用本组件的del模式模拟折叠块，此时将可以正常嵌套。
  3. 引用参数对于每个开关来说都是独立的，开关之间不会出现参数冲突。
  4. 每个开关所绑定的目标数量无上限，但为del模式开关绑定过多目标可能会导致内容出现位置浮动而影响页面观感。
    • 希望避免的话，可以用opa模式代替，这样会保留目标的占位。不过，此时用户可以选中隐藏状态的内容。
  5. 多个开关指向同一个id的情况下，只有所有开关都开启才会使标识符显示。
  6. 同一个元素可以与多个开关绑定从而实现类似逐步解密的效果，只需为其赋予多个标识符就好。
    • 如[[span class="标识符一 标识符二"]]内容[[/span]]
    • 注意，简写格式下的元素仅能绑定一个标识符，且标识符必须全小写。
  7. 跟版式类似，由于[[module CSS]]自身的问题，本组件的部分变量需保存页面才能生效。

Fallback

针对部分使用未适配:has()的浏览器的用户，本组件预留了回退方案。在回退方案中，del模式将被降级处理为opa模式，select-more变量和-r后缀将被忽略。同时，由于CSS本身的限制，开关将不再与标识符绑定。若仍希望保留组件的互动属性，可以启用实验性的hover-fallback属性，在此属性下，标识符效果将在用户的光标悬停于元素上时消退（select-less模式将不支持此效果）！

源代码

▲ 点击展开源代码▼ 点击隐藏

详见组件后端

css
/* 主要功能实现 */
.{$id}-cont.hide-y :is(.unfolded .af, .folded .ab),
.{$id}-cont.hide-no :is(.folded .af, .unfolded .ab),
.{$id}-cont :is(.ab, .af) > span {
    display: none;
}

.{$id}-cont :is(.ab, .af) > span.s {
    display: inline;
}

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

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

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

.{$id}-cont .etster > .af,
.{$id}-cont .etster > .ab,
.{$id}-cont .foldable-list-container .ftext {
    color: transparent;
}

.{$id}-cont .etster > .ftext, .foldable-list-container :is(.af, .ab) a {
    pointer-events: all;
    -webkit-user-select: auto;
       -moz-user-select: auto;
        -ms-user-select: auto;
            user-select: auto;
}

:has(.{$id}-cont .folded) /*{$select-more}/*:has(> /{$select-more}*/:is(.{$id}, [style="color: {$id}"])/*{$select-more}/)/{$select-more}*/ /*{$select-less}/ > * /{$select-less}*/,
:has(.{$id}-cont .unfolded) /*{$select-more}/*:has(> /{$select-more}*/:is(.{$id}-r, [style="color: {$id}-r"])/*{$select-more}/)/{$select-more}*/ /*{$select-less}/ > * /{$select-less}*/ {
    {${$mode}d}: none !important;
    {${$mode}o}: {$opacity} !important;
    -webkit-{${$mode}f}: blur(calc({$blur} * 1px)) !important;
    {${$mode}f}: blur(calc({$blur} * 1px)) !important;
    {${$mode}b}: currentColor;
}

:has(.{$id}-cont.cen-cont .folded) .{$id}::selection,
:has(.{$id}-cont.cen-cont .folded) [style="color: {$id}"]::selection,
:has(.{$id}-cont.cen-cont .unfolded) .{$id}-r::selection,
:has(.{$id}-cont.cen-cont .unfolded) [style="color: {$id}-r"]::selection {
    background-color: currentColor;
}

:has(.{$id}-cont .folded) /*{$select-more}/*:has(> /{$select-more}*/:is(.{$id}-del, [style="color: {$id}-del"])/*{$select-more}/)/{$select-more}*/ /*{$select-less}/ > * /{$select-less}*/,
:has(.{$id}-cont .unfolded) /*{$select-more}/*:has(> /{$select-more}*/:is(.{$id}-del-r, [style="color: {$id}-del-r"])/*{$select-more}/)/{$select-more}*/ /*{$select-less}/ > * /{$select-less}*/,
.has-warning-box {
    display: none !important;
}

:has(.{$id}-cont .folded) /*{$select-more}/*:has(> /{$select-more}*/:is(.{$id}-opa, [style="color: {$id}-opa"])/*{$select-more}/)/{$select-more}*/ /*{$select-less}/ > * /{$select-less}*/,
:has(.{$id}-cont .unfolded) /*{$select-more}/*:has(> /{$select-more}*/:is(.{$id}-opa-r, [style="color: {$id}-opa-r"])/*{$select-more}/)/{$select-more}*/ /*{$select-less}/ > * /{$select-less}*/ {
    opacity: {$opacity} !important;
}

:has(.{$id}-cont .folded) /*{$select-more}/*:has(> /{$select-more}*/:is(.{$id}-blur, [style="color: {$id}-blur"])/*{$select-more}/)/{$select-more}*/ /*{$select-less}/ > * /{$select-less}*/,
:has(.{$id}-cont .unfolded) /*{$select-more}/*:has(> /{$select-more}*/:is(.{$id}-blur-r, [style="color: {$id}-blur-r"])/*{$select-more}/)/{$select-more}*/ /*{$select-less}/ > * /{$select-less}*/ {
    -webkit-filter: blur(calc({$blur} * 1px)) !important;
    filter: blur(calc({$blur} * 1px)) !important;
}

:has(.{$id}-cont .folded) /*{$select-more}/*:has(> /{$select-more}*/:is(.{$id}-cen, [style="color: {$id}-cen"])/*{$select-more}/)/{$select-more}*/ /*{$select-less}/ > * /{$select-less}*/,
:has(.{$id}-cont .unfolded) /*{$select-more}/*:has(> /{$select-more}*/:is(.{$id}-cen-r, [style="color: {$id}-cen-r"])/*{$select-more}/)/{$select-more}*/ /*{$select-less}/ > * /{$select-less}*/ {
    background-color: currentColor;
}

:has(.{$id}-cont .folded) .{$id}-cen::selection,
:has(.{$id}-cont .folded) [style="color: {$id}-cen"]::selection,
:has(.{$id}-cont .unfolded) .{$id}-cen-r::selection,
:has(.{$id}-cont .unfolded) [style="color: {$id}-cen-r"]::selection {
    background-color: currentColor;
}
css
/* fallback */

@supports not (grid-template-columns: subgrid) {
    .has-warning-box {
        display: block !important;background: var(--error-color);
        color: var(--highlight-color);
        padding: .2em 1.5em;
        margin: .5em;
        clip-path: polygon(2em 0, 100% 0, 100% calc(100% - 1.5em), calc(100% - 2em) 100%, 0 100%, 0 1.5em);
    }
    :is(.{$id}, [style="color: {$id}"]) /*{$select-less}/ > * /{$select-less}*/,
    :is(.{$id}-r, [style="color: {$id}-r"]) /*{$select-less}/ > * /{$select-less}*/ {
        {${$mode}o}: {$opacity} !important;
        {${$mode}o}: {$opacity} !important;
        -webkit-{${$mode}f}: blur(calc({$blur} * 1px)) !important;
        {${$mode}f}: blur(calc({$blur} * 1px)) !important;
        {${$mode}b}: currentColor;
        -webkit-transition: .2s;
        transition: .2s;
    }

    .{$id}::selection,
    [style="color: {$id}"]::selection {
        background-color: currentColor;
    }

    :is(.{$id}-del, [style="color: {$id}-del"]) /*{$select-less}/ > * /{$select-less}*/,
    :is(.{$id}-opa, [style="color: {$id}-opa"]) /*{$select-less}/ > * /{$select-less}*/ {
        opacity: {$opacity} !important;
        -webkit-transition: .2s;
        transition: .2s;
    }

    :is(.{$id}-blur, [style="color: {$id}-blur"]) /*{$select-less}/ > * /{$select-less}*/ {
        -webkit-filter: blur(calc({$blur} * 1px)) !important;
        filter: blur(calc({$blur} * 1px)) !important;
        -webkit-transition: .2s;
        transition: .2s;
    }

    :is(.{$id}-cen, [style="color: {$id}-cen"]) /*{$select-less}/ > * /{$select-less}*/ {
        background-color: currentColor;
        -webkit-transition: .2s;
        transition: .2s;
    }

    .{$id}-cen::selection,
    [style="color: {$id}-cen"]::selection {
        background-color: currentColor;
    }

    /* {$hover-fallback}/
    :is(.{$id}, [style="color: {$id}"]):hover {
        {${$mode}o}: 1 !important;
        {${$mode}o}: 1 !important;
        -webkit-{${$mode}f}: none !important;
        {${$mode}f}: none !important;
        {${$mode}b}: transparent;
    }

    .{$id}::selection,
    [style="color: {$id}"]::selection {
        background-color: unset;
    }

    :is(.{$id}-del, [style="color: {$id}-del"], .{$id}-opa, [style="color: {$id}-opa"]):hover {
        opacity: 1 !important;
    }

    :is(.{$id}-blur, [style="color: {$id}-blur"]):hover {
        -webkit-filter: none !important;
        filter: none !important;
    }

    :is(.{$id}-cen, [style="color: {$id}-cen"]):hover {
        background-color: transparent;
    }
    /{$hover-fallback} */
}
/* 开关 */
[[div_ class="{$id}-cont {$mode}-cont {$extraclass} hide-{$hide}"]]
[[ul]][[li class="folded" style="position: relative;"]]
[[div_ class="foldable-list-container"]]
[[span class="ftext"]]{$beforeText}[[/span]][[span class="af"]][[span class="{$showText} s"]][# {$showText}][[/span]][[/span]][[span class="ab"]][[span class="{$hideText} s"]][# {$hideText}][[/span]][[/span]][[span class="ftext"]]{$afterText}[[/span]][[/div]]
[[div_ class="etster"]]
[[span class="ftext"]]{$beforeText}[[/span]][[span class="af"]]{$showText}[[/span]][[span class="ab"]]{$hideText}[[/span]][[span class="ftext"]]{$afterText}[[/span]]
[[/div]][[/li]][[/ul]]
[[/div]]
原创组件
页面版本：⁨0⁩, 最后编辑于: ⁨2026/8/12 20:16:58⁩ (⁨⁨35⁩ 日前⁩), 现时评分: 69
历史 附件 + 选项