学习css世界后:
利用max-height和overflow:hidden来实现
HTML
<div class="box">
<input id="check" type="checkbox">
<p>个人觉得,display:table-cell最强的应用是可以任意个数列表的等宽效果。</p>
<div class="element">
<p>display:table-cell其他一些应用,例如,两栏自适应布局,垂直居中效果等等都是可以通过其他技术手段模拟出来的,但是,根据列表个数自动等宽的效果,其他CSS是很难模拟的,尤其当需要兼容IE8浏览器的时候。
</p>
</div>
<label for="check" class="check-in">更多↓</label>
<label for="check" class="check-out hidden">收起↑</label>
</div>
CSS:
.hidden {
display: none;
}
.box {
width: 30%;
max-height: 666px;
margin: 0 auto;
/*border:1px solid saddlebrown ;*/
}
#check {
display: none;
}
.element {
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
:checked~.element {
/*:checked 选择器匹配每个选中的输入元素(仅适用于单选按钮或复选框),在选中后的样式*/
max-height: 666px;
/* border: 1px solid saddlebrown;*/
}
JS
var checkIn = document.querySelector(".check-in");
var checkOut = document.querySelector(".check-out");
checkIn.onclick = function () {
checkIn.classList.add("hidden");
checkOut.classList.remove("hidden");
}
checkOut.onclick = function () {
checkOut.classList.add("hidden");
checkIn.classList.remove("hidden");
}
注意:需要注意的是max-height不可以过小;如果.element的大于max-height那就无法完全显示出来,如果过大就会出现延迟的效果
总结:
1.<label for="check" class="check-in">更多↓</label>中的for属性与<input id>中的ID的关系
2.对伪元素的学习 :checked在单选或复选checkbox的时候触发的类,