CSS
.manualItem {
text-align: left;
max-height:0;
overflow:hidden;
transition:max-height .3s;
}
:checked ~ .manualItem {
max-height:666px;
}
input[type="checkbox"] {
position:fixed;
clip:rect(0 0 0 0);
}
:checked ~ .check-in {
display:none;
}
:checked ~ .check-out {
display:inline-block;
}
.check-out {
display:none;
}
.check-in,.check-out {
color:#34538b;
cursor:pointer;
}
DIV
<div class="manualContent">
<input id="check" type="checkbox">
<h4> 内容标题</h4>
<p> 内容简要</p>
<div class="manualItem">
详情描述 - 点击后展开后的内容
</div>
<label for="check" class="check-in"><span><< 展开 >></span></label>
<label for="check" class="check-out"><span><< 收起 >></span></label>
</div>
友情提示:本站所有文章,如无特殊说明或标注,均为何星星原创发布。与此同时,趋于近年来本站的文章内容频繁被他站盗用与机器采集,现已全局禁用网站文字内容操作,了解详情或转载文章请 点此 继续!
0 条评论