当前位置： 首页 > news >正文

如何使用CSS实现一个带有动画效果的折叠面板（Accordion）？

news 文章来源：https://blog.csdn.net/JHXL_/article/details/132645359 2025/5/18 18:00:54

聚沙成塔·每天进步一点点

  • ⭐ 专栏简介
  • ⭐ 带有动画效果的折叠面板（Accordion）
  • ⭐ 写在最后

⭐ 专栏简介

前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中，我们将以问答形式每天更新，为大家呈现精选的前端知识点和常见问题解答。通过问答形式，我们希望能够更直接地回应读者们对于前端技术方面的疑问，并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具，我们将深入浅出地解释概念，并提供实际案例和练习来巩固所学内容。同时，我们也会分享一些实用技巧和最佳实践，帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此，我们还会定期推出一些项目实战教程，让你能够将所学知识应用到实际开发中。通过实际项目的练习，你将能够更好地理解前端开发的工作流程和方法论，并培养自己解决问题和独立开发的能力。我们相信，只有不断积累和实践，才能真正掌握前端开发技术。因此，请准备好迎接挑战，勇敢地踏上这段前端入门之旅！无论你是寻找职业转型、提升技能还是满足个人兴趣，我们都将全力以赴，为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧！加入前端入门之旅，成为一名出色的前端开发者！ 让我们启航前端之旅

⭐ 带有动画效果的折叠面板（Accordion）

折叠面板是一个常见的用户界面元素，通常用于显示可展开和折叠的内容。您可以使用CSS和JavaScript来创建带有动画效果的折叠面板。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>折叠面板</title>
</head>
<body><div class="accordion"><div class="accordion-item"><button class="accordion-btn">折叠项 1</button><div class="accordion-content"><p>这是折叠项 1 的内容。</p></div></div><div class="accordion-item"><button class="accordion-btn">折叠项 2</button><div class="accordion-content"><p>这是折叠项 2 的内容。</p></div></div><div class="accordion-item"><button class="accordion-btn">折叠项 3</button><div class="accordion-content"><p>这是折叠项 3 的内容。</p></div></div></div><script src="script.js"></script>
</body>
</html>

/* styles.css */
body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f0f0f0;
}.accordion {max-width: 400px;margin: 20px auto;
}.accordion-item {border: 1px solid #ddd;margin-bottom: 5px;overflow: hidden;transition: max-height 0.3s ease-in-out;
}.accordion-btn {background-color: #0077ff;color: white;padding: 10px;width: 100%;text-align: left;border: none;cursor: pointer;
}.accordion-content {padding: 10px;max-height: 0;overflow: hidden;transition: max-height 0.3s ease-in-out;
}

// script.js
const accordionItems = document.querySelectorAll('.accordion-item');accordionItems.forEach((item) => {const button = item.querySelector('.accordion-btn');const content = item.querySelector('.accordion-content');button.addEventListener('click', () => {item.classList.toggle('active');if (item.classList.contains('active')) {content.style.maxHeight = content.scrollHeight + 'px';} else {content.style.maxHeight = '0';}});
});

在上述代码中，我们创建了一个折叠面板，包含三个折叠项。CSS用于样式化折叠面板，其中.accordion-content的max-height属性在折叠和展开时进行过渡动画。JavaScript用于监听按钮的点击事件，以切换折叠项的状态，并根据状态来设置内容的最大高度，以实现折叠和展开的动画效果。

通过这种方式，用户可以点击按钮展开或折叠内容，伴随着平滑的动画效果。这只是一个简单的示例，您可以根据需要进一步自定义和扩展折叠面板。

⭐ 写在最后

本专栏适用读者比较广泛，适用于前端初学者；或者没有学过前端对前端有兴趣的伙伴，亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点，所以如果你具备了前端的基础跟着本专栏学习，也是可以很大程度帮助你查漏补缺，由于博主本人是自己再做内容输出，如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我，我们一起进步，与此同时也推荐大家几份专栏，有兴趣的伙伴可以订阅一下：除了下方的专栏外大家也可以到我的主页能看到其他的专栏；

前端小游戏（免费）这份专栏将带你进入一个充满创意和乐趣的世界，通过利用HTML、CSS和JavaScript的基础知识，我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验，这个专栏都适合你。我们会从最基础的知识开始，循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习，你将学会如何运用HTML来构建页面结构，使用CSS来美化游戏界面，并利用JavaScript为游戏添加交互和动态效果。在这个专栏中，我们将涵盖各种类型的小游戏，包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程，并提供详细解释和代码示例。同时，我们也会分享一些优化技巧和最佳实践，帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能，还是对页面游戏开发感兴趣，前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】（付费） 欢迎来到Vue3通透教程！这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南（免费） 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码，我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者，都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成，我们将全面覆盖各个方面。通过阅读本专栏，您将能够提升JavaScript代码的可靠性和可维护性，并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧！点击订阅TypeScript入门指南专栏

在这里插入图片描述

相关文章：

如何使用CSS实现一个带有动画效果的折叠面板（Accordion）？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 带有动画效果的折叠面板&#xff08;Accordion&#xff09;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个…...

编程日记 2023/9/5 2:20:35

HarmonyOS开发：探索动态共享包的依赖与使用

前言 所谓共享包&#xff0c;和Android中的Library本质是一样的&#xff0c;目的是为了实现代码和资源的共享&#xff0c;在HarmonyOS中&#xff0c;给开发者提供了两种共享包&#xff0c;HAR&#xff08;Harmony Archive&#xff09;静态共享包&#xff0c;和HSP&#xff08;H…...

编程日记 2023/9/5 2:19:34

【力扣】45.跳跃游戏 II ＜贪心＞

给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处&#xff1a;0 < j < nums[i] &#xff1b;i j < n 返回到…...

编程日记 2023/9/5 2:18:34

J. Med. Chem 2022｜TocoDecoy+: 针对机器学习打分函数训练和测试的无隐藏偏差的数据集构建新方法

原文标题&#xff1a;TocoDecoy: A New Approach to Design Unbiased Datasets for Training and Benchmarking Machine-Learning Scoring Functions 论文链接&#xff1a;https://pubs.acs.org/doi/10.1021/acs.jmedchem.2c00460 论文代码&#xff1a;GitHub - 5AGE-zhang/T…...

编程日记 2023/9/5 2:17:33

.net core 上传文件大小限制

微软官网文档中给的解释是.net core 默认上传文件大小限制是30M&#xff0c;所以即便你项目里没有限制&#xff0c;这里也有个默认限制。 官网链接地址 总结了一下解决办法&#xff1a; 1.首先项目里添加一个web.config自定义配置文件 在配置文件中加上这段配置 <!--//…...

编程日记 2023/9/5 2:16:31

Windows安装单节点Zookeeper

刚学习Dubbo&#xff0c;在Centos7中docker安装的zookeeper3.7.1。然后在启动provider时一直报错&#xff0c;用尽办法也没有解决。然后zookeeper相关的知识虽然以前学习过&#xff0c;但是已经忘记的差不多了。现在学习dubbo只能先降低版本使用了&#xff0c;之后再复习zookee…...

编程日记 2023/9/5 2:15:29

C++ gendrate Gauss noise

手动生成 Marsaglia和Bray在1964年提出,C版本如下: mu是均值,sigma是方差,X服从N(0,1)分布 高斯噪声为加性噪声,在原图的基础上加上噪声即为加噪后的图象。 double generateGaussianNoise(double mu, double sigma) {static double V1, V2, S;static int phase 0;double X;d…...

编程日记 2023/9/5 2:14:28

centos环境下idea开发问题集锦

1、端口不能访问&#xff0c;可能是访问的协议问题或者防火墙拦截为问题导致。 1.1 centos环境下idea直接拉起部署&#xff0c;查看端口信息如下&#xff0c;命令为 [rootlocalhost ~]# lsof -i:8088 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME java …...

编程日记 2023/9/5 2:13:26

C++-list实现相关细节和问题

前言&#xff1a;C中的最后一个容器就是list&#xff0c;list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指…...

编程日记 2023/9/5 2:12:24

hadoop学习：mapreduce的wordcount时候，继承mapper没有对应的mapreduce的包

踩坑描述&#xff1a;在学习 hadoop 的时候使用hadoop 下的 mapreduce&#xff0c;却发现没有 mapreduce。 第一反应就是去看看 maven 的路径对不对 settings——》搜索框搜索 maven 检查一下 Maven 路径对不对 OK 这里是对的 那么是不是依赖下载失败导致 mapreduce 没下下…...

编程日记 2023/9/5 2:11:23

windows10上搭建caffe以及踩到的坑

对动作捕捉的几篇论文感兴趣&#xff0c;想复现一下&#xff0c;需要caffe环境就折腾了下&#xff01;转模型需要python 2.7环境&#xff0c;我顺便也弄了&#xff01;&#xff01;&#xff01; 1. 环境 Windows10 RTX2080TI 11G Anaconda Python2.7 visual studio 2013 cuda…...

编程日记 2023/9/5 2:10:21

大数据Flink（七十）：SQL 动态表 连续查询

文章目录 SQL 动态表 & 连续查询 一、​​​​​​​SQL 应用于流处理的思路...

编程日记 2023/9/5 2:09:20

「MySQL-04」Linux环境下使用C/C++连接并操纵MySQL

目录 一、准备mysql库&#xff1a;Connector/C 1. 查看是否有mysql相关的库和头文件 2. 安装devel(开发库) 3.到官网下载开发包&#xff0c;并上传到Linux 3.0 须知 3.1 到官网下载开发包 3.2 上传安装包至Linux 二、mysql库&#xff1a;Connector/C 的使用 1. 创建并初始化mys…...

编程日记 2023/9/5 2:08:18

【力扣】两数相除（c/c++)

目录 题目 注意&#xff1a; 示例 1: 示例 2: 提示&#xff1a; 题目解析 题目思路 代码思路 数据处理 注意 减法函数 第一次使用的函数 问题 第二次改良后的代码 处理i的值并且返回 总代码 力扣的代码 注意 题目 给你两个整数&#xff0c;被除数 dividend 和…...

编程日记 2023/9/5 2:07:16

《Kubernetes部署篇：Ubuntu20.04基于二进制安装安装kubeadm、kubelet和kubectl》

一、背景 由于客户网络处于专网环境下&#xff0c; 使用kubeadm工具安装K8S集群&#xff0c;由于无法连通互联网&#xff0c;所有无法使用apt工具安装kubeadm、kubelet、kubectl&#xff0c;当然你也可以使用apt-get工具在一台能够连通互联网环境的服务器上下载kubeadm、kubele…...

编程日记 2023/9/5 2:06:15

go学习part21 Redis

300_尚硅谷_Redis的基本介绍和原理示意_哔哩哔哩_bilibili Redis 命令 | 菜鸟教程 (runoob.com) 1.基本介绍 2.基本操作 Redis的基本使用: 说明:Redis安装好后&#xff0c;默认有16个数据库&#xff0c;初始默认使用0号库,编号是0...15 1.添加key-val [set] 2.查看当前redi…...

编程日记 2023/9/5 2:05:13

时序预测 | MATLAB实现基于PSO-BiGRU、BiGRU时间序列预测对比

时序预测 | MATLAB实现基于PSO-BiGRU、BiGRU时间序列预测对比 目录 时序预测 | MATLAB实现基于PSO-BiGRU、BiGRU时间序列预测对比效果一览基本描述程序设计参考资料 效果一览 基本描述 1.时序预测 | MATLAB实现基于PSO-BiGRU、BiGRU时间序列预测&#xff1b; 2.单变量时间序列数…...

编程日记 2023/9/5 2:04:10

Unity3D下如何采集camera场景数据并推送RTMP服务？

Unity3D使用场景 Unity3D是非常流行的游戏开发引擎&#xff0c;可以创建各种类型的3D和2D游戏或其他互动应用程序。常见使用场景如下&#xff1a; 游戏开发&#xff1a;Unity3D是一个广泛用于游戏开发的环境&#xff0c;适用于创建各种类型的游戏&#xff0c;包括动作游戏、角…...

编程日记 2023/9/5 2:03:08

黑客可利用 Windows 容器隔离框架绕过端点安全系统

新的研究结果表明&#xff0c;攻击者可以利用一种隐匿的恶意软件检测规避技术&#xff0c;并通过操纵 Windows 容器隔离框架来绕过端点安全的解决方案。 Deep Instinct安全研究员丹尼尔-阿维诺姆&#xff08;Daniel Avinoam&#xff09;在本月初举行的DEF CON安全大会上公布了…...

编程日记 2023/9/5 2:02:07

STM32注入通道

什么是注入通道？ 注入通道是ADC的一种采样方式，主要用于在规则通道转换期间并行处理快速变化信号的采样。注入通道的转换可以在规则通道转换时强行插入，相当于一个“中断通道”。当有注入通道需要转换时，规则通道的转换会停止，优先执行注入通道的转换，当注入通道的转换执…...

编程日记 2023/9/5 2:01:05

WebVR — 网络虚拟现实

推荐&#xff1a;使用 NSDT编辑器 快速搭建3D应用场景 虚拟现实设备 随着Oculus Rift和许多其他生产设备即将上市&#xff0c;未来看起来很光明——我们已经有足够的技术来使VR体验“足够好”&#xff0c;可以玩游戏。有许多设备可供选择&#xff1a;像Oculus Rift或HTC Vive这…...

编程日记 2023/9/5 2:00:04

ASP.NET Core 的 Routing

ASP.NET Core 的 Routing ASP.NET Core 的 controllers 使用Routing 中间件匹配客户端的 url 请求&#xff0c;然后映射到对应的 controller 的处理方法&#xff08;Action&#xff09;上。 Actions 可以是 常规路由 或 属性路由 的映射。 MVC App一般使用常规路由。 REST API…...

编程日记 2023/9/5 1:59:03

IBM Spectrum LSF Explorer 为要求苛刻的分布式和任务关键型高性能技术计算环境提供强大的工作负载管理

IBM Spectrum LSF Explorer 适用于 IBM Spectrum LSF 集群的强大、轻量级报告解决方案 亮点 ● 允许不同的业务和技术用户使用单一解决方案快速创建和查看报表和仪表板 ● 利用可扩展的库提供预构建的报告 ● 自定义并生成性能、工作负载和资源使用情况的报…...

编程日记 2023/9/5 1:58:02

RHCE——十一、NFS服务器

NFS服务器 一、简介1、NFS背景介绍2、生产应用场景 二、NFS工作原理1、示例图2、流程 三、NFS的使用1、安装2、配置文件3、主配置文件分析3.1 实验1 4、NFS账户映射4.1 实验24.2 实验3 四、autofs自动挂载服务1、产生原因2、安装3、配置文件分析4、实验45、实验5 一、简介 1、…...

编程日记 2023/9/5 1:57:01

Python编程练习与解答 练习100：随机密码

编写一个生成最忌密码的函数&#xff0c;密码的长度应该在7-10个字符之间。每个字符应该从ASCII表的第33位到126位中随机选择。函数不接受任何参数&#xff0c;返回随机生成的密码作为位移结果。在文件的main程序中显示随机生成的密码。main程序只在解答没有被导入另一个文件时…...

编程日记 2023/9/5 1:55:59

华为云云服务器评测 | 从零开始：云耀云服务器L实例的全面使用解析指南

文章目录 一、前言二、云耀云服务器L实例要点介绍2.1 什么是云耀云服务器L实例2.1.1 浅析云耀云服务器L实例 2.2 云耀云服务器L实例的产品定位2.3 云耀云服务器L实例优势2.4 云耀云服务器L实例支持的镜像与应用场景2.5 云耀云服务器L实例与弹性云服务器&#xff08;ECS&#xf…...

编程日记 2023/9/5 1:54:57

欧科云链研究院探析Facebook稳定币发行经历会不会在PayPal重演

引言 作者最近的报告-探析PayPal发行稳定币是否会重蹈Facebook覆辙-近期被英国的金融时报&#xff08;中文版&#xff09;刊登。由于该报告在欧科云链研究院内部反响较好&#xff0c;下面就带大家简单的剖析这篇报告的主要内容。 *这篇文章主要由对比分析&#xff08;已删减&a…...

编程日记 2023/9/5 1:53:55

docker 容器pip、git安装异常；容器内web对外端口ping不通

1、docker 容器pip、git安装异常 错误信息&#xff1a; git clone https://github.com/vllm-project/vllm.git Cloning into ‘vllm’… fatal: unable to access ‘https://github.com/vllm-project/vllm.git/’: Failed to connect to 127.0.0.1 port 10808: Connection ref…...

编程日记 2023/9/5 1:52:54

SpringBoot Mybatis 多数据源 MySQL+Oracle+Redis

一、背景 在SpringBoot Mybatis 项目中&#xff0c;需要连接 多个数据源&#xff0c;连接多个数据库&#xff0c;需要连接一个MySQL数据库和一个Oracle数据库和一个Redis 二、依赖 pom.xml <dependencies><dependency><groupId>org.springframework.boot&l…...

编程日记 2023/9/5 1:51:53

【JavaScript 16】对象继承 原型对象属性 原型链 构造函数属性 instanceof运算符 继承 多重继承 模块

对象继承 原型对象概述instanceof运算符构造函数的继承多重继承模块 A 对象通过继承 B 对象&#xff0c;就能 直接拥有 B 对象的所有属性和方法&#xff08;利于代码复用&#xff09; 大部分面向对象的编程语言都是通过类&#xff08;class&#xff09;实现对象的继承 但 传统…...

编程日记 2023/9/5 1:50:51