列表的展开与收起
大家先开看看这张图:
很多人会说,裤子都脱了,你给我看这个?不就是js点击效果么…
NO!!!
checkbox
input
标签大家经常用到,form表单中用的心累有木有…可一般情况下,咱们的input标签中,type字段都是text、submit居多。只有在网站注册是遇到恶霸条款(已阅读以上协议,并同意遵守…)时,才会使用这么一个鸡肋的小方框功能。
但如果使用checkbox的checked默认值记录功能,在配合label标签的for指向它,即可用css完成列表的展开收起。
其实上面的图,代码很简单,不妨看看:
我们通过checkbox的标记值,对tag-list进行display的特殊处理,完成了通过css控制列表的展开与收起,当然这个无样式的效果看起来有些糙,但图糙内容不糙啊…
上图代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin<