css实现折叠样式实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、实现思路二、实现代码三、效果前言通过html+css实现折叠样式一、实现思路动态修改元素的高度，并添加过渡效果。二、实现代码html代码：<div class="fold"><div class="child0">选项一</div><div class="child1">

如人饮氺

4911人浏览 · 2022-05-06 17:14:06

如人饮氺 · 2022-05-06 17:14:06 发布

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

文章目录

前言
一、实现思路
二、实现代码
三、效果

前言

通过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;
    }