|
|
| （未显示同一用户的3个中间版本） |
| 第1行： |
第1行： |
| <!-- 写法1：只在展开时显示内容 -->
| | 分类:不存在 |
| <div class="lm-collapsible">
| |
| <div class="lm-toggle">
| |
| <span class="lm-icon">+</span>
| |
| <span class="lm-text">展开查看更多</span>
| |
| </div>
| |
| <div class="lm-content">
| |
| 这里是折叠起来的详细内容<br>
| |
| </div>
| |
| </div>
| |
|
| |
|
| <!-- 写法2：展开前后都显示一部分内容（更常见的一种用法） -->
| | {{Category:不存在}} |
| <div class="lm-collapsible">
| |
| <div class="lm-toggle">
| |
| <span class="lm-icon">+</span>
| |
| <span class="lm-text">查看完整回答</span>
| |
| </div>
| |
| <div class="lm-content">
| |
| <!-- 展开前一直显示的部分 -->
| |
| <div class="lm-preview">
| |
| 这是一段简介文字，大概就两三行...<br>
| |
| 看起来还不错对吧？
| |
| </div>
| |
|
| |
| <!-- 只在展开后显示的部分 -->
| |
| <div class="lm-hidden-part">
| |
| 但是其实后面还有很多内容没说呢～<br>
| |
| 比如这个功能的实现原理是……<br>
| |
| 此处省略500字）<br>
| |
| 最后再来个总结：非常好用！
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| | |
| | |
| | |
| | |
| | |
| {{模板:折叠图片框 | |
| |图片=LOGO.png
| |
| |描述=描述文本
| |
| }}
| |
| | |
| | |
| {{#css:
| |
| | |
| @supports selector(:has(*)) {
| |
| .collapsible-image {
| |
| display: block;
| |
| border: solid 2px #c12c32;
| |
| background: var(--background-color-base,#fff);
| |
| }
| |
| | |
| .collapsible-image-text{
| |
| display: inline-block;
| |
| padding: 3px;
| |
| font-size: 1.25rem;
| |
| background: #c12c32;
| |
| color: var(--background-color-base,#fff);
| |
| font-weight: bold;
| |
| }
| |
| | |
| .collapsible-image-text-main{
| |
| display: block;
| |
| margin: 3px;
| |
| }
| |
| | |
| | |
| .collapsible-image:has(.mw-collapsible-toggle-expanded) .collapsible-image-text,
| |
| .collapsible-image:has(.mw-collapsible-toggle-expanded) .collapsible-image-text-main {
| |
| display: none;
| |
| }
| |
| | |
| }
| |
| | |
| | |
| | |
| }
| |
| | |
| }} | |
