.element { max-height:0; overflow:hidden; transition:max-height .3s; } :checked ~ .element { max-height:666px; } input[type="checkbox"] { position:absolute; 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; }
如果max-height值太大,在收起时会有“效果延迟”的问题。