js实现折叠面板

最新推荐文章于 2024-07-31 14:35:30 发布
最新推荐文章于 2024-07-31 14:35:30 发布
阅读量1.4w 收藏 10
点赞数 4
分类专栏： js 文章标签： js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39197319/article/details/84957268
版权

文章目录

最终效果

在这里插入图片描述

具体操作

思路

1、点击每一个面板，触发对应的下方内容展开折叠，不能影响其它面板。也就是根据点击的箭头所在dom，获取下方内容对应dom，改变该dom的display展示方式；
2、箭头的方向也要发生相应的改变；也就是改变箭头属性；
3、主要涉及获取相应dom和改变属性等方法，主要是理清思路。

html

给默认的箭头一个点击触发的事件
在这里插入图片描述

js

注意看注释说明，这里用的原生js，但原理都是一样的

listCardsHandle(e){
   
		//根据当前点击的dom，获取需要展示隐藏的dom
最低0.47元/天 解锁文章
孤身前往的未知
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html实现折叠面板,js轻松实现折叠面板
weixin_39725844的博客
05-31 964
移动端导航栏有个很常见的折叠菜单，bootstrap有collapse插件实现，jQuery UI有Accordion组件。最近用js无插件实现一个这样的效果。探究历程display：none；直接采用display，虽然实现了控制容器的显示和隐藏，但是效果生硬。//jq或者zepeto的hide和show方法就是采用这个属性$('#el').hide();$('#el').show();/**s...
【React 】折叠面板，点击展开时再请求数据
yqdid的博客
06-20 515
需求背景：使用折叠面板的形式展示数据，面板内部数据需要在打开时请求接口获取。 遇到问题：最开始使用Antd 的折叠面板组件，它对于数据直接渲染是没问题的，但是不好满足打开面板时再动态加载数据的需求，于是自己手写了一个。 效果展示(已脱敏)： 话不多说，以下是手写的组件代码： 面板的header 内容结构可以根据自己需要调整 /* eslint-disable @typescript-eslint/no-unused-vars */ import { DownOutlined, RightOut
js折叠面板
weixin_47773727的博客
02-25 1795
前言：若需要增删面板的（标题和内容），在js的obj对象里面更改。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> ...
html折叠面板js,js轻松实现折叠面板
weixin_33978722的博客
06-05 753
移动端导航栏有个很常见的折叠菜单，bootstrap有collapse插件实现，jQuery UI有Accordion组件。最近用js无插件实现一个这样的效果。探究历程display：none；直接采用display，虽然实现了控制容器的显示和隐藏，但是效果生硬。//jq或者zepeto的hide和show方法就是采用这个属性$('#el').hide();$('#el').show();/**s...
JavaScript网页特效-折叠面板
weixin_43396749的博客
11-25 2224
JavaScript网页特效-折叠面板
vue3实现折叠面板
qq_34720531的博客
07-06 1168
总是忘记vue怎么实现折叠面板，记录一下，没有动画样式。
js轻松实现折叠面板
weixin_34355881的博客
11-04 2984
移动端导航栏有个很常见的折叠菜单，bootstrap有collapse插件实现，jQuery UI有Accordion组件。最近用js无插件实现一个这样的效果。 探究历程 display：none； 直接采用display，虽然实现了控制容器的显示和隐藏，但是效果生硬。 //jq或者zepeto的hide和show方法就是采用这个...
基于uniapp和vue.js实现折叠面板?
qq_40889256的博客
08-11 1323
基于uniapp和vue.js实现折叠面板? html: <template> <view class="course"> <view class="fold-list" v-for="(item,index) in list" :key="index"> <view class="fold-title"> <view class="badge">{{item.number}}</view> <text
jquery实现折叠面板
丽丽大神ing的博客
10-25 2651
1.dom元素 <div class="box"> <ul id="ul"> <li>Client agreement <div class="line"></div> <div class="content"> <p>RISK WARNING: Trading leveraged d...
vue实现折叠面板动画
天书笔记
12-03 3690
css实现折叠面板动画本是一件容易的事情，但是，若使用height控制，需要height已知，（当然，使用max-height控制，然后给一个足够大的max-height也是可以的）；若使用scale，父容器的高度又未能随动画一起变化，本文讲述如何在vue中使用js动画实现折叠面板动画功能。 1. 理论基础 vue transition 函数式组件 2. 样式 // collapse-transition.css .collapse-transition { transi
微信小程序实现折叠面板
08-28
微信小程序实现折叠面板 微信小程序实现折叠面板是指在微信小程序中实现折叠面板的功能，通过控制详情部分的显示隐藏，来实现折叠效果，同时切换右侧向下箭头。本文将详细介绍微信小程序实现折叠面板的相关资料，...
vuejs实现折叠面板展开收缩动画效果
01-19
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。 循环列表，html: (item,index) key=index> <p class=p ref=liCon>{{item.content}} (item,index)> !item.openFlag>【展开】...
Element Collapse 折叠面板的使用方法
10-15
Element Collapse 折叠面板是Vue.js组件库Element UI中的一个功能组件，用于创建可折叠的内容区域，方便用户按需查看和隐藏详细信息。这个组件在网页设计中常用于节省空间，提升用户体验，尤其是在处理大量信息时。...
微信小程序——折叠面板
12-29
在微信小程序中，我们可以通过JavaScript来控制页面样式，进而实现折叠面板的功能。下面将详细介绍这一过程。 首先，我们需要创建一个基础的微信小程序页面结构，包括`wxml`（结构层）、`wxss`（样式层）和`js`...
AmazeUI 折叠面板的实现代码
11-19
### AmazeUI 折叠面板实现详解 #### 一、AmazeUI框架介绍 ...该框架通过提供丰富的预定义组件（如轮播...通过简单的HTML结构和CSS样式定义，结合JavaScript的交互功能，开发者可以轻松地在其项目中实现折叠面板的效果。
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1312
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 861
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【前端面试】五、框架
最新发布
weixin_49015558的博客
07-31 452
1 Vue2 2 Vue3 3 React 4 Angular
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值