HTML 展开和收起内容
CSS代码
<style>
.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;
}
</style>html 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>黑蜘蛛
