css实现列表展开与收起

最新推荐文章于 2025-04-08 08:02:30 发布

清风Python

最新推荐文章于 2025-04-08 08:02:30 发布

阅读量4.2k

点赞数 2

分类专栏： Web开发

本文链接：https://blog.youkuaiyun.com/BreezePython/article/details/101475276

版权

Web开发专栏收录该内容

35 篇文章

订阅专栏

列表的展开与收起

大家先开看看这张图：

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>