css实现折叠样式实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

通过html+css实现折叠样式

一、实现思路

动态修改元素的高度，并添加过渡效果。

二、实现代码

html代码：

<div class="fold">
      <div class="child0">选项一</div>
      <div class="child1">选项11</div>
      <div class="child1">选项22</div>
      <div class="child1">选项33</div>
      <div class="child1">选项44</div>
    </div>

css代码

.fold{
    width: 200px;
    height: 51px;
    transition: all 1s;
    overflow: hidden;
    text-align: center;
    line-height: 50px;
    background-color: transparent;
    color: white;
    border-radius: 5px;
}
.fold:hover{
      height: 258px;
    }
.child0{
      width: 200px;
      height: 50px;
      background-color: #409eff;
      border-radius: 5px;
    }
    .child1{
      width: 200px;
      height: 50px;
      border-top: 1px solid white;
      border-radius: 5px;
      background-color: #409eff;
    }

三、效果