}
运行效果：https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
slideUp()/slideDown()的实现
slideUp()/slideDown()通过改变元素的高度来实现上卷和下拉。html依旧采用上面的，css修改如下：
CSS Code复制内容到剪贴板
:checked~#shbox{
height:0px;
}
#shbox{
background:#ccc;
overflow-y:hidden;
color:red;
width:200px;
height:200px;
box-sizing:border-box;
transition:all 2s;
position:absolute;
top:50px;
}
#shbox添加了 overflow-y:hidden,是为了连文本也实现隐藏，不然，#shbox里面的文本仍然会显示； transition实现一个过渡;同时去掉了border属性。
运行结果：https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/
