多重折叠：样式说明

注意：

此页为于后室维基内部所使用的组件页面。该页面内容可在其它页面中被使用或引用。

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

使用

• • _
  + 展开使用方法- 收起使用方法

  [[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]]

  • • _
    + 展开内容1- 收起内容1

    第一段文本

    • • _
      + 展开内容2- 收起内容2

      第二段文本

      • • _
        + 展开内容3- 收起内容3

        第三段文本

        - 收起内容3
      - 收起内容2
    - 收起内容1

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

  • • _
    + 展示变量说明- 收起变量说明

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

    nohide（顶部、底部）

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

    folded（顶部）

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

    ifprot（顶部）

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

    • • _
      + 展开设置 ifprot=true 后的样子- 收起设置 ifprot=true 后的样子

      文本

      - 收起设置 ifprot=true 后的样子
    - 收起变量说明
  - 收起使用方法

多重折叠 样式代码

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

.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;
}