模板:折叠面板：修订间差异

2024年6月3日 (一) 10:55的最新版本

如果是第一次来，按"Ctrl+D"可以收藏随时查看更新~觉得WIKI好玩的话，请推荐给朋友哦～(◕ω＜)☆
按右上角“WIKI功能→编辑”即可修改页面内容。

×

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

说明文档

使用方法

注意

主框: 数字或者英文,可选,如果存在多个不同的折叠组时必选.注意!标题与开始的主框参数必须一致.
选项:数字或者英文,可选,一个组里面大于一个选项是必选.且选项值不能相同
展开:值任意,可选.是否直接展开

你所写的

{{折叠面板|开始|主框=1}}
{{折叠面板|标题=测试标题1|选项=1|主框=1|展开=是}}
测试内容
{{折叠面板|内容结束}}
{{折叠面板|标题=测试标题2|选项=2|主框=1}}
测试内容
{{折叠面板|内容结束}}
{{折叠面板|结束}}

显示内容

测试标题1

>>>点击可展开查看详情<<<

测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容
容测试内容测试内容测试内容测试内

测试标题2

>>>点击可展开查看详情<<<

测试内容

多个嵌套

你所写的

{{折叠面板|开始|主框=main}}
{{折叠面板|标题=测试标题1|选项=m1|主框=main|展开=是}}
{{折叠面板|开始|主框=main-sub}}
{{折叠面板|标题=子面板测试标题1|选项=s1|主框=main-sub|展开=是}}
子面板内容1
{{折叠面板|内容结束}}
{{折叠面板|标题=子面板测试标题2|选项=s2|主框=main-sub}}
子面板内容2
{{折叠面板|内容结束}}
{{折叠面板|结束}}
{{折叠面板|内容结束}}
{{折叠面板|标题=测试标题2|选项=m2|主框=main}}
测试内容
{{折叠面板|内容结束}}
{{折叠面板|结束}}

显示内容

测试标题1

>>>点击可展开查看详情<<<

子面板测试标题1

>>>点击可展开查看详情<<<

子面板内容1

子面板测试标题2

>>>点击可展开查看详情<<<

子面板内容2

测试标题2

>>>点击可展开查看详情<<<

测试内容

所有模板列表

@@ 第1行： / 第1行： @@
-<includeonly>{{#ifeq:{{{1|}}}|开始|<div class="accordion accordion-flush" id="accordion-{{{主框|1}}}">}}{{#ifeq:{{{1}}}|结束|</div>}}{{#ifeq:{{{1}}}|内容结束|</div></div></div>}}{{#if:{{{标题|}}}|<div class="accordion-item"><div class="accordion-header"><div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{{选项|1}}}" aria-expanded="false" aria-controls="flush-collapse{{{选项|1}}}">{{{标题}}}</div></div><div id="flush-collapse{{{选项|1}}}" class="accordion-collapse collapse {{#if:{{{展开|}}}|show}}" data-bs-parent="#accordion-{{{主框|1}}}"><div class="accordion-body">}}</includeonly><includeonly>{{#css:.accordion{ margin-bottom: 20px}.accordion .accordion-item{ position: relative;margin-bottom: 2px;font-size: 1rem;}.accordion .accordion-header{ font-weight: bold; color: #915d2e; background: #dfcdad;}.accordion .accordion-button:not(.collapsed){color: #915d2e;}.accordion .accordion-button{ background-color: #dfcdad !important; color: #915d2e;}.accordion-body{ color: #666; background: #fbf9f1;  }.accordion-body p { line-height: 1.6;}}
+<includeonly>{{#ifeq:{{{1|}}}|开始|<div class="accordion accordion-flush" id="accordion-{{{主框|1}}}">}}{{#ifeq:{{{1}}}|结束|</div>}}{{#ifeq:{{{1}}}|内容结束|</div></div></div>}}{{#if:{{{标题|}}}|<div class="accordion-item"><div class="accordion-header"><div class="accordion-button {{#if:{{{展开|}}}||collapsed}}" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{{选项|1}}}" aria-expanded="false" aria-controls="flush-collapse{{{选项|1}}}">{{{标题}}}<span class="icon-collapse"></span><span class="icon-expand"></span><div class="tip">&gt;&gt;&gt;点击可展开查看详情&lt;&lt;&lt;</div></div></div><div id="flush-collapse{{{选项|1}}}" class="accordion-collapse collapse {{#if:{{{展开|}}}|show}}" data-bs-parent="#accordion-{{{主框|1}}}"><div class="accordion-body">}}</includeonly><includeonly>{{#css:.accordion{margin-bottom:20px}.accordion .accordion-item{position:relative;margin-bottom:2px;font-size:1em}.accordion .accordion-header{cursor:pointer;font-weight:bold;color:#915d2e;background:#dfcdad}.accordion .accordion-button:not(.collapsed){color:#915d2e}.accordion .accordion-button:not(.collapsed)::after,.accordion .accordion-button::after{display:none;}.accordion .accordion-button{padding:0 0 0 .5em;background-color:#dfcdad !important;color:#915d2e;font-size:1em;height:2.5em}.accordion-button.collapsed{padding-bottom:3em;height: 5.5em}.accordion-button .tip{position: absolute;bottom: 0;left: 0;width: 100%;height: 3em;background: #fff;color: #5b88f3;text-align: center;line-height:3;display:none;}.accordion-button.collapsed .tip{display:block}.accordion .accordion-button:not(.collapsed) .icon-collapse{display:none}.accordion .accordion-button:not(.collapsed) .icon-expand{display:block}.accordion .accordion-button .icon-collapse{display:block;}.accordion .accordion-button .icon-expand{display:none;}.accordion .accordion-header .icon-collapse,.accordion .accordion-header .icon-expand{position:relative;width:2.5em;height:2.5em;background-color:#d1b88e;flex-shrink:0;margin-left:auto}.accordion .accordion-header .icon-collapse::before{content:"";position:absolute;top:50%;left:50%;width:60%;height:3px;background-color:#987B5D;transform:translate(-50%,-50%)}.accordion .accordion-header .icon-expand::before,.accordion .accordion-header .icon-expand::after{content:"";position:absolute;top:50%;left:50%;width:60%;height:3px;background-color:#987B5D}.accordion .accordion-header .icon-expand::before{transform:translate(-50%,-50%)}.accordion .accordion-header .icon-expand::after{transform:translate(-50%,-50%) rotate(90deg)}.accordion .accordion-body{padding:.5em;color:#666;background:#fbf9f1}.accordion-flush>.accordion-item{border:none}.accordion-body p{line-height:1.6}}
 </includeonly><noinclude>
 {{信息
@@ 第8行： / 第8行： @@
 |color=#3c763d
 }}
-{{测试|模板}}[[分类:模板]]{{模板说明}}</noinclude>
+{{折叠面板|模板}}[[分类:模板]]{{模板说明}}</noinclude>

2024年6月3日 (一) 10:55的最新版本

使用方法

注意

你所写的

显示内容

多个嵌套

你所写的

显示内容

目录