查看“︁Test”︁的源代码

<!-- 写法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：展开前后都显示一部分内容（更常见的一种用法） -->
<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;
    }

}



}

}}