通过HTML+CSS实现折叠样式完整代码

简介： 通过HTML+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;
 
    }