css实现列表展开与收起
列表的展开与收起
大家先开看看这张图：
很多人会说，裤子都脱了，你给我看这个？不就是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: 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>