css实现列表展开与收起
2019-06-01 本文已影响171人
清风Python
列表的展开与收起
大家先开看看这张图：
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>
