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

html+css+js实现Collapse 折叠面板

实现效果:

HTML部分

<div class="collapse"><ul><li><div class="header"><h4>一致性 Consistency</h4><span class="iconfont icon-jiantou"></span></div><div class="footer">与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;<br>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div></li><li><div class="header"><h4>反馈 Feedback</h4><span class="iconfont icon-jiantou "></span></div><div class="footer">控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;<br>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div></li><li><div class="header"><h4>效率 Efficiency</h4><span class="iconfont icon-jiantou"></span></div><div class="footer">简化流程:设计简洁直观的操作流程;<br>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;<br>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div></li><li><div class="header"><h4>可控 Controllability</h4><span class="iconfont icon-jiantou"></span></div><div class="footer">用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;<br>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div></li></ul></div>

CSS部分

<style>*{margin: 0;padding: 0;box-sizing: border-box;}li{list-style: none;}.collapse{width: 900px;border: 1px solid rgb(235, 235, 235);margin: 50px auto;padding: 25px;}.collapse ul{border-top: 1px solid rgb(235, 235, 235);}.collapse ul li{border-bottom: 1px solid rgb(235, 235, 235);}.collapse ul .header{cursor: pointer;position: relative;/* background-color: pink; */height: 40px;line-height: 40px;}.collapse ul .header h4{font-size: 18px;font-weight: normal;color: rgb(62, 63, 65);}.collapse ul li span{position: absolute;right: 0;top: -1px;transition: 0.8s ease;}.collapse ul li span.active{transform: rotate(-90deg);}.collapse ul .footer{overflow: hidden;max-height: 0;transition: max-height 0.8s ease;color: rgb(62, 63, 65)}.collapse ul li .footer.active{max-height: 500px;}</style>

JS部分 

<script>const headers=document.querySelectorAll('.header')headers.forEach(function(item){item.addEventListener('click',function(){const icon=this.querySelector('.iconfont')const footer=this.nextElementSiblingicon.classList.toggle('active');footer.classList.toggle('active');})})
</script>

相关文章:

html+css+js实现Collapse 折叠面板

实现效果&#xff1a; HTML部分 <div class"collapse"><ul><li><div class"header"><h4>一致性 Consistency</h4><span class"iconfont icon-jiantou"></span></div><div class"…...

RM服务器研究(一)

客户端默认端口是10100&#xff1a; MultiPort.dll BOOL sub_10001070() { UINT v0; // esi BOOL result; // eax CHAR KeyName; // [espCh] [ebp-10Ch] DWORD flOldProtect; // [esp10h] [ebp-108h] CHAR Buffer; // [esp14h] [ebp-104h] char v5; // [esp15h] [e…...

云岚到家xxl job 配置

调度中心&#xff1a; 负责管理调度信息&#xff0c;按照调度配置发出调度请求&#xff0c;自身不承担业务代码&#xff1b; 主要职责为执行器管理、任务管理、监控运维、日志管理等 任务执行器&#xff1a; 负责接收调度请求并执行任务逻辑&#xff1b; 主要职责是执行任…...

国内动态短效sk5

HTTP爬虫代理,软件测试&#xff0c; 动态转发IP方案&#xff0c;全高匿名&#xff0c;私密IP&#xff0c;固定网关将您每次请求的HTTP重定向到不同的后端IP&#xff0c;支持API;指路小熊IP https://www.xiaoxiongip.com?fromqkJWgD可测...

【路径规划】路径平滑算法,A星算法拐点的圆弧化处理

摘要 A算法广泛应用于路径规划中&#xff0c;但其生成的路径通常在拐点处呈现不平滑的折线。为了提升路径的平滑性&#xff0c;本文提出了一种基于圆弧的平滑处理方法&#xff0c;用于对A算法产生的路径拐点进行优化。通过在MATLAB中进行仿真验证&#xff0c;该方法能够有效减…...

【寻找one piece的算法之路】——双指针算法!他与她是否会相遇呢?

&#x1f490;个人主页&#xff1a;初晴~ &#x1f4da;相关专栏&#xff1a;寻找one piece的刷题之路 什么是双指针算法 双指针算法是一种常用的编程技巧&#xff0c;尤其在处理数组和字符串问题时非常有效。这种方法的核心思想是使用两个指针来遍历数据结构&#xff0c;这两…...

UFS 3.1架构简介

整个UFS协议栈可以分为三层:应用层(UFS Application Layer(UAP)),传输层(UFS Transport Layer(UTP)),链路层(UIC InterConnect Layer(UIC))。应用层发出SCSI命令(UFS没有自己的命令使用的是简化的SCSI命令),在传输层将SCSI分装为UPIU,再经过链路层将命令发送给Devices。下…...

注册安全分析报告:科研诚信查询平台无验证方式导致安全隐患

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…...

04.useTitle

在 React 应用中,动态更新页面标题是提升用户体验的一个重要方面。它可以让用户更清楚地知道当前页面的内容或状态,特别是在单页应用(SPA)中。useTitle 钩子提供了一种简单而有效的方式来管理文档标题。以下是如何实现和使用这个自定义钩子: const useTitle = title =>…...

ROS2中的srv、action、发布订阅三种方式

ROS2中的srv、action、发布订阅三种方式 以下是ROS2中srv、action、发布订阅三种方式的差异和使用场景的表格形式呈现&#xff1a; 特性/方式srv&#xff08;服务&#xff09;action&#xff08;动作&#xff09;发布订阅&#xff08;Publish-Subscribe&#xff09;通信模式请…...

HarmonyOS/OpenHarmony 自定义弹窗页面级层级控制解决方案

关键词&#xff1a;CuntomDialog自定义弹窗、SubWindow子窗口、页面级、弹窗层级控制、鸿蒙、弹窗展示层级异常 问题存在API版本&#xff1a;API10 - API12&#xff08;该问题已反馈&#xff0c;期望后续官方能增加页面级控制能力&#xff09; 在正常的鸿蒙app开发过程中&…...

C/C++进阶(一)--内存管理

更多精彩内容..... &#x1f389;❤️播主の主页✨&#x1f618; Stark、-CSDN博客 本文所在专栏&#xff1a; 学习专栏C语言_Stark、的博客-CSDN博客 其它专栏&#xff1a; 数据结构与算法_Stark、的博客-CSDN博客 ​​​​​​项目实战C系列_Stark、的博客-CSDN博客 座右铭&a…...

docker-compose 快速部署clickhouse集群

在本教程中&#xff0c;我们将学习如何使用 Docker Compose 部署一个带有三节点的 ClickHouse 集群&#xff0c;并使用 ZooKeeper 作为分布式协调服务。 前提条件 注意事项&#xff1a; 镜像版本号注意保持一致 [zookeeper:3.7, clickhouse/clickhouse-server:22.5.4]config…...

闯关训练三:Git 基础知识

任务1: 破冰活动&#xff1a;自我介绍 点击Fork目标项目&#xff0c;创建一个新的Fork 获取仓库链接 在连接好开发机的vscode终端中逐行执行以下代码&#xff1a; git clone https://github.com/KelvinIII/Tutorial.git # 修改为自己frok的仓库 cd Tutorial/ git branch -a g…...

Java--IO基本流

IO流 概述 生活中&#xff0c;你肯定经历过这样的场景。当你编辑一个文本文件&#xff0c;忘记了ctrls &#xff0c;可能文件就白白编辑了。当你电脑上插入一个U盘&#xff0c;可以把一个视频&#xff0c;拷贝到你的电脑硬盘里。那么数据都是在哪些设备上的呢&#xff1f;键盘…...

结合大语言模型的机械臂抓取操作简单介绍

一、大语言模型与机械臂抓取的基本操作 1. 大语言模型简介 大语言模型是基于深度学习技术构建的自然语言处理模型&#xff0c;能够生成、理解和处理文本信息。这些模型通过训练大量的文本数据&#xff0c;学习语法、上下文和常识&#xff0c;能够执行多种任务&#xff0c;如文…...

Vivado - BD(差分时钟、简单分频、RESET、KEY)

目录 1. 简介 1.1 要点 1.2 buffer 介绍 2. vivado 工程 2.1 Block Design 2.2 IBUFDS 2.3 BUFGCE_DIV 2.4 Processor System Reset 2.5 key_mod 2.6 led_drv 3. 编译与调试 3.1 XDC 3.2 Debug 4. 总结 1. 简介 1.1 要点 了解 Utility Buffer v2.2 中的 Buffer…...

7--苍穹外卖-SpringBoot项目中套餐管理 详解(一)

前言 目录 新增套餐 需求分析和设计 代码开发 根据分类id查询菜品 Controller层 Service层 ServiceImpl层 Mapper层 DishMapper.xml 新增套餐 实体类 mapper层 Service层 ServiceImpl层 Mapper层 SetmealMapper.xml setmealDishMapper.xml 套餐分页查询 需求分…...

【尚硅谷】RocketMQ 消息队列学习笔记

RocketMQ 和 Kafka 消息队列概念比较&#xff1f; 好的&#xff01;RocketMQ 和 Kafka 都是分布式消息队列系统&#xff0c;它们的核心概念有很多相似之处&#xff0c;但在具体实现和命名上有所不同。下面我通过一个表格来对比 RocketMQ 和 Kafka 中的五个概念&#xff1a;消息…...

C题(三)芝麻开门 --- strcmp函数应用

场景一&#xff1a;“芝麻开门 ”是通往C语言的大门的暗号&#xff0c;现在你需要说对暗号&#xff0c;大门才会打开。 【分解目标1】字符串的输入 char arr[20] { 0 }; //字符的集合---字符串&#xff08;数组表示&#xff09;//20为预定的数组的大小scanf("%s", a…...

C++函数模板、选择排序实现(从大到小)

template <class T> void mysw (T &a , T &b) {T temp b;b a;a temp; }template <class T> void muSort( T &arr ,int len) {//该实现为选择排序(高到低)for (int i 0; i < len; i) {int max i ; //首先默认本次循环首位元素为最大for (int j …...

EasyExcel使用介绍

EasyExcel使用 1、EasyExcel介绍 1.1 官网介绍 传统操作Excel大多都是利用Apach POI进行操作的&#xff0c;但是POI框架并不完善&#xff0c;使用过程非常繁琐且有较多的缺陷&#xff1a; 动态操作Excel非常繁琐,对于新手来说&#xff0c;很难在短时间内上手;读写时需要占用…...

字段临时缓存包装器

前言 在实际开发中&#xff0c;我们有时候存在一种需求&#xff0c;例如对于某个字段&#xff0c;我们希望在某个明确的保存节点前对字段的修改都仅作为缓存保留&#xff0c;最终是否应用这些修改取决于某些条件&#xff0c;比如玩家对游戏设置的修改可能需要玩家明确确认应用修…...

Python(三)——列表

文章目录 创建列表访问下标遍历列表元素新增元素查找元素删除元素连接列表切片操作 创建列表 创建列表主要有两种方式 [ ]表示一个空的列表 a [] print(type(a)) # <class list> print(a) # []通过list()的方式来创建一个空列表 a list() print(type(a)) # …...

MySQL--三大范式(超详解)

目录 一、前言二、三大范式2.1概念2.2第一范式&#xff08;1NF&#xff09;2.3第二范式&#xff08;2NF&#xff09;2.3第三范式&#xff08;3NF&#xff09; 一、前言 欢迎大家来到权权的博客~欢迎大家对我的博客进行指导&#xff0c;有什么不对的地方&#xff0c;我会及时改进…...

追梦无Bug的软件世界

追梦无Bug的软件世界&#xff1a;测试人员的视角与探索 我有一个梦想&#xff0c;今天我们共同承载着一个愿景&#xff1a;创造一个没有Bug的软件世界。 我梦想有一天&#xff0c;用户将享受到完全无Bug的软件体验&#xff0c;用户不再因为软件中的Bug而感到困扰和沮丧。 我梦…...

在C#中使用Redis实现高效消息队列

使用Redis实现C#中的消息队列 Redis是一种开源的内存数据结构存储系统,因其高性能和灵活性被广泛用于缓存、数据库和消息队列等场景。本文将详细介绍如何在C#中使用Redis实现一个简单的消息队列,涵盖环境准备、代码实现和使用示例。 1. 环境准备 1.1 安装Redis 首先,确保…...

微服务JMeter解析部署使用全流程

目录 1、介绍 2、下载 3、运行 4、设置简体中文版 5、开始测试 1、添加线程组 2、添加监听器 3、添加请求 先.测试userController里的查询方法 6、查看结果 1、查看结果树 2、汇总报告 3、聚合报告 7、JMeter报错 1、介绍 Apache JMeter 是 Apache 组织基于 Java…...

Python 从入门到实战32(数据库MySQL)

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;通过熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们讨论了数据库编程接口操作的相关知识。今天我们将学习…...

hrnet训练的pt模型结合目标检测进行关键点识别的更准确前向推理

本篇在将图像输入hrnet识别之前先进行目标检测来确定识别的位置&#xff0c;让识别更加精准。 本段代码设置了一个区域框BOX&#xff0c;让人走入区域内才开始检测&#xff0c;适用于考核等场景&#xff0c;也可以直接去掉BOX也是一样的效果。若画面背景中有多个行人&#xff0…...

清河做网站哪儿好/电商培训机构靠谱吗

演示站展示 代购系统演示前端站网址&#xff1a;https://www.1buyo.com/ 代购系统演示站后端站网址&#xff1a;https://www.1buyo.com/admin 更多了解请移步: http://console.open.onebound.cn/console/?iRookie 以下是演示站前台部分源码&#xff1a; <meta charset&qu…...

wordpress主页页面模板/seo优化排名服务

数据链路层差错检测之循环冗余检验CRC 引用https://blog.csdn.net/wenqiang1208/article/details/71641414 为什么引入CRC 现实的通信链路都不会是理想的。这就是说&#xff0c;比特在传输的过程中可能会产生差错&#xff1a;1可能会变成0&#xff0c;0可能会变成1&#xff0c…...

一般网站的字体大小/微商营销技巧

一、基础知识 1、什么是编译&#xff1a; 有了 C 源文件&#xff0c;通过编译器将其编译成 obj 文件(目标文件)。如果程序没有错误&#xff0c;没有任何提示&#xff0c;但在 Debug 目录下会出现一个 Hello.obj 文件&#xff0c;该文件称为目标文件。 2、什么是链接&#xff…...

简历免费在线制作网站/如何制作自己的网站?

https://redis.io/download 安装下载 https://blog.csdn.net/ksdb0468473/article/details/52126009 后台启动转载于:https://www.cnblogs.com/luckybaby/p/9046863.html...

网络营销与策划自考真题/成都官网seo厂家

阅读目录前言运行期多态编译期多态运行期多态与编译期多态优缺点分析运行期多态优点运行期多态缺点编译期多态缺点关于显式接口与隐式接口正文回到顶部前言 今日的C不再是个单纯的“带类的C”语言&#xff0c;它已经发展成为一个多种次语言所组成的语言集合&#xff0c;其中泛型…...

做个普通的网站在上海做要多少钱/2024年重大政治时事汇总

2019独角兽企业重金招聘Python工程师标准>>> volatile volatile关键字来保证可见性。 当一个共享变量被volatile修饰时&#xff0c;它会保证修改的值会立即被更新到主存&#xff0c;当有其他线程需要读取时&#xff0c;它会去内存中读取新值。 java中 主存 每个线程…...