Dentrado, read-only mode: mirroring http://backrooms-wiki-cn.wikidot.com/component:colstyleAbout Dentrado
多重折叠：样式说明

多重折叠组件由 SCP JP Wiki 的 Boyu12 创建。你可以在此处查看注释版本的源代码以及变量一览表。

使用

    • _

    + 展开使用方法[[#if 0 | | - 收起使用方法 ]]

    [[include :backrooms-wiki-cn:component:coltop show=+ 展开内容1|hide=- 收起内容1]]
    第一段文本
    [[include :backrooms-wiki-cn:component:coltop show=+ 展开内容2|hide=- 收起内容2]]
    第二段文本
    [[include :backrooms-wiki-cn:component:coltop show=+ 展开内容3|hide=- 收起内容3]]
    第三段文本
    [[include :backrooms-wiki-cn:component:colend]]
    [[include :backrooms-wiki-cn:component:colend]]
    [[include :backrooms-wiki-cn:component:colend]]

    • [[div [[#if 0 | | class="colmod-link-end" ]] ]]
      [[#if 0 | | - 收起内容1 ]]
    [[/div]]

    你还可以套更多层。在第一次保存之前，你无法预览到组件正确应用的样子！

      • _

      + 展示变量说明[[#if 0 | | - 收起变量说明 ]]

      有些变量可以应用在多重折叠的顶部与底部，有些则只能应用在顶部。像这样使用：
      [[include component:coltop 变量1=值|变量2=值]]
      所有变量都以 | 分隔。所有变量都是可选的（show 和 hide 同样是变量，只对顶部有效）。如果你没有设置变量，就会采用默认值。

      nohide（顶部、底部）

      • nohide=true：【底部默认】隐藏展示 / 收起的文字链接（如果你将顶部、底部都设置为 nohide=false，折叠就无法折叠）。
      • nohide=false：【顶部默认】显示展示 / 收起的文字链接。

      folded（顶部）

      • folded=true：【默认】折叠内容默认收起。
      • folded=false：折叠内容默认展开。

      ifprot（顶部）

      • ifprot=true：折叠显示为一个按钮，而非红色的链接文字。
      • ifprot=false：【默认】折叠显示为链接。
    [[/div]][[/div]]

    [[div [[#if 0 | | class="colmod-link-end" ]] ]]

    [[#if 0 | | - 收起使用方法 ]]
    [[/div]]
[[/div]]

多重折叠 样式代码

搬运注：此处的代码仅供参考，并非实际使用的代码。

.colmod-block > ul,
.colmod-block > ul > li {
    display: block;
    line-height: normal;
    list-style: none;
    margin: 0;
    padding: 0;
}
.colmod-block > ul > li > ul,
li.folded > .colmod-link-top a + a,
li.folded > .colmod-content,
li.folded > .colmod-link-end a,
li.unfolded > .colmod-link-top a:first-child {
    display: none;
}
.colmod-content {
    -webkit-animation: colmod-fade-in 0.2s ease-in-out;
    -moz-animation: colmod-fade-in 0.2s ease-in-out;
    animation: colmod-fade-in 0.2s ease-in-out;
    -webkit-animation-timing-function: cubic-bezier(0.3649610494,0,0.6350389506,1);
    -moz-animation-timing-function: cubic-bezier(0.3649610494,0,0.6350389506,1);
    animation-timing-function: cubic-bezier(0.3649610494,0,0.6350389506,1);
}
li.folded > .colmod-content {
    -webkit-animation-name: none;
    -moz-animation-name: none;
    animation-name: none;
}
@-webkit-keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
[class|="colmod-link"] div.foldable-list-container {
    display: inline;
}
.colmod-collapsiblealt > [class|="colmod-link"],
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] {
    margin: 0.5em 0;
    text-align: center;
}
.colmod-collapsiblealt > [class|="colmod-link"] a,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a {
    padding: 0.1em 0.5em;
    text-decoration: none;
    background-color: #F4F4F4;
    border: 1px solid #AAA;
    color: #000;
}
.colmod-collapsiblealt > [class|="colmod-link"] a:hover,
.colmod-collapsiblealt > [class|="colmod-link"] a:active,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:hover,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:active {
    background: #DDD;
    text-decoration: none;
}
Dependencies