列表的展开与收起
大家先开看看这张图：
网络异常，图片无法展示
|
css实现列表展开与收起.gif
很多人会说，不就是js点击效果么....
NO!!!
checkbox
input标签大家经常用到，form表单用的心累....可一般咱们的input标签中，type字段都是text、submit居多。只有到恶霸条款（已阅读以上协议，并同意...）时，才会使用。
但如果使用checkbox配合label标签的for，即可用css完成列表的展开收起。
上面的图片代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> * { margin: 0px ; padding: 0px; width: 100px; } #menu-checkbox{ display: none; } #menu-checkbox:checked ~ .tag-list{ display: none; } li{ float: left; margin: 2px; list-style-type: none; } a { text-decoration: none; } </style> </head> <body> <label for="menu-checkbox">主菜单</label> <input id="menu-checkbox" type="checkbox" name="" value=""> <div class="tag-list"> <ul> <li><a href="#">首页</a> </li> <li><a href="#">正文</a> </li> <li><a href="#">设置</a> </li> </ul> </div> </body> </html>
