解决折叠面板Collapse上点击复选框会触发折叠面板问题

最新推荐文章于 2024-01-20 21:36:07 发布
最新推荐文章于 2024-01-20 21:36:07 发布
阅读量765 收藏 5
点赞数 4
文章标签： 前端 javascript react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a15029296293/article/details/129957845
版权

在项目中有一个小需求，需要在折叠面板头部加一个复选框按钮，点击复选框，修改数据状态，这里的问题是，点击复选框，会触发折叠面板，效果如下。

这里我查阅了一下资料，这是因为事件传递导致的，点击复选框，复选框的点击事件会传递给Collapse折叠面板，所以导致折叠面板打开关闭。

这里我们可以监听复选框的onClick事件，用e.stopPropagation()阻止事件冒泡就可以实现点击复选框不会触发折叠面板了。

 使用e.stopPropagation()阻止事件冒泡后的效果：

 

 

阿琰a_
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue之在每个折叠面板下复选框选中表格行给下拉框选中值互不影响
smilling sky的博客
08-29 1015
实现功能： 每个折叠面板下有对应数据的表格，选中表格行，给对应行的的某列下拉框赋值，互不影响。 功能图： 初始时： 第一个面板操作：全选，点击全部问题1赋值 第二个面板操作：全选，点击全部问题2赋值 数据的改变互不影响。 实现原理： 把面板下的内容放在一个组件里，即子组件，在父组件中使用子组件。(目前只会这种方法） 代码 <template> <div class="content"> <div class="content1"> <d
uniAPP中uni-collapse使用
最新发布
liuhua7383的专栏
02-06 846
uni-collapse(折叠面板) 是uni-app的扩展组件，用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。在我的实际使用过程中碰到的问题是折叠的内容不能显示。在网上搜上好久，得到的最终的解决方案是在uni-collapse-item为再加一个view，v-for在view中。
折叠面板（el-collapse）嵌套复选框（el-checkbox）遇到的问题
m0_55941180的博客
04-15 1747
1.要实现的效果 2.正常写代码思路：折叠面板包裹复选框 ps：这样写会遇到复选框绑定的v-model值有误，此时复选框在循环下，绑定值也会随之循环，如果绑定同一个变量就会有问题 3.解决方法：用复选框嵌套折叠面板 ...
开发小程序折叠面板
03-29
(此图片来源于网络，如有侵权，请联系删除! ) 参考了一系列的小程序UI库。。。，最后参考了ant-design的折叠面板(collapse)组件设计，功能大致如下 支持默认展开 动态设置标签栏 动态设置内容 支持无效状态 支持切换响应方法 戳源码 构思 折叠面板组件由列表组件(ui-list)实现，列表项作为标签页，列表项子元素 content 作为弹出层，数据子项结构大致如下 { title: '标签标题', content: '弹层内容' } 复制代码 列表组件 构建一个动态组件 ui-list ，通过配置文件实现列表结构，将如下这段数据结构 const mockData
微信小程序实现折叠面板
08-28
主要为大家详细介绍了微信小程序实现折叠面板的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uniapp中组件库的Checkbox 复选框 的丰富使用方法
精通前端技术，了解后端接口
01-03 3137
data() {return {// 基本案列数据name: '苹果',},name: '香蕉',},name: '橙子',],},methods: {
如何使点击ElementUI collapse 上的组件时不响应折叠/展开
PursueExcellence的博客
11-13 8333
情景： 点击折叠面板上的输入框时，会出现折叠面板也跟着响应的情况 方法： 可以在el-input外套一层div，监听这个div的点击事件，然后阻止冒泡事件。 输入框代码： <template> <el-row > <el-col :span="6"> <div class="elrow" @click='stopPr...
ElementUI折叠组件bug问题及解决
接着奏乐接着舞的博客
01-13 4291
elementUI中折叠组建的bug及解决方案。主要问题是里面使用三方组件Json编辑器CodeMirror时样式不对且数据必须点击一次才会显示，另一个是多层嵌套的折叠组建的数据渲染问题。
使用Ant Design React的Collapse折叠面板组件时，如何阻止点击子元素却同时也触发了折叠面板父组件的展开收起方法
hzxOnlineOk的博客
03-02 2894
监听子控件的click事件，并调用e.stopPropagation()阻止click事件继续传递，可以成功让外层的折叠面板父控件就接收不到click事件 const renderHeader = (header: string, icon: React.ReactNode, canEdit: boolean, item?: any) => ( <div> {icon} <span style={{ marginLeft: 8, marginRig
uni-collapse 动态数据 手风琴不生效
m0_54281860的博客
03-30 757
uni-collapse 动态数据 手风琴不生效
一个属性border-collapse解决Table的边框问题
09-25
表格的边框算是页面制作中最头痛的，带边线的表格在之前非常讨厌做，不过今天终于解决了这个问题，下面将示例与大家分享下
jQuery LigerUI V1.1.0
01-04
V1.1.0更新记录： 表格 [需求]加入分组模式 [需求]加入树模式 [需求]加入统计行(位于底部) [需求]加入延时加载 [需求]加入本地查询支持 [需求]加入复选框初始化的支持 [需求]列 百分比 [需求]列 显示和隐藏 [需求]列 表头改变文字 [需求]编辑器事件: 编辑前事件、验证编辑器结果是否通过、结束编辑后事件 [需求]增加右击接口 [需求]多表头 [优化]grid新增行的时候可通过column的defaultValue进行设置默认值 [修复]grid的编辑功能和checkbox多选功能存在冲突 [修复]修复加载时不显示loading的问题，并加入自定义加载时的支持 [修复]修改grid addRow()如果没有数据的时候row没有高度 [修复]修改可编辑grid中DateEditor编辑错误的问题 下拉框 [需求]支持动态改变值 [需求]增加打开下拉框前事件，利用这个参数可以用来调用其他函数，比如打开一个新窗口来选择值 表单 [需求]spinner支持最大最小值 树 [需求]增加 选择/反选择节点 接口 弹窗 [需求]支持回车关闭 [修复]dialog.frame浏览器兼容支持 V1.0.2更新记录： 皮肤 [增加]增加一套皮肤(Silvery) [增加]增加一套图标 表单 [增加]增加表单提示气泡插件，结合表单验证使用，在demo中提供表单验证的一个解决方案 [优化]优化表单,每个表单插件(ligerTextBox、ligerSpinner等)可以通过属性ligerui自动加载参数，如ligerui="{width:200}" 表格 [优化]gridRows和Total字段名可配置，提交给服务器的参数可配置，所有与用户操作交互的地方（如上一页、下一页）都加上事件 [优化]插件执行直接返回ligerGrid Manager(其他用到接口管理对象的插件都类同) 树 [优化]树支持id pid的这种线性数据结构格式 弹窗 [修复]弹窗样式冲突 [优化]弹窗增加close支持 V1.0.1更新记录： 弹窗 [增加]增加新插件：弹框，命名空间为$.ligerDialog。一系列静态方法。包括Open、Success、Error、Warn、Show。（这个样式比较美观，于是加上去了。并采用九格的排版方式，兼容性更好，扩展性更好）集对话框、模态窗口、非模态窗口等于这个命名空间下。（原来已经有弹出框插件和窗口插件了，ligerWindow和ligerMessage，不推荐，暂时保留） 菜单 [增加]增加新插件：菜单、菜单条、工具条,菜单可以自定义图片，可以动态设置项，动态的显示位置。菜单条和是在菜单的基础上显示的一个类似Window菜单的一个插件，工具条是一些按钮的集合，可以自定义图片。 树 [增加]提供右击方法实现的接口 [优化]点击项就折叠/反折叠，而不是点击 + 才折叠 下拉框 [增加]支持在分页的表格在选取数据(配置grid,参数跟ligerGrid的参数一致)  [增加]支持在树选取数据(配置tree,参数跟ligerTree的参数一致)  [增加]提供Resize方法实现的接口 [优化]细节优化 表格 [增加]汇总方式增加一个render(自定义函数，不限于sum、avg、count、max、min)  [增加]增加复选框列，同时增加相应的事件和方法。 [优化]优化了显示速度 [修复]解决在IE6下表格头部文字消失的问题 [修复]解决包含在form下不能正常显示高度的问题(height设置为百分比) 布局 [增加]ligerTab增加右键菜单功能，包括 关闭其他/关闭全部等。 [增加]ligerTab增加获取Items Count，删除项等常见方法 [增加]ligerLayout增加初始化控制左边/右边隐藏、是否折叠、是否调整大小等方法。 [优化]面板点击项就折叠/反折叠，而不是点击 + 才折叠 [修复]解决ligerLayout，在IE6下调整Line太宽的问题 [修复]解决ligerLayout，包含在form下不能正常显示高度的问题 表单 [修复] ligerSpinner每次点击即增加/减少，而不是按住的时候才有效果
Element Collapse 折叠面板的使用方法
10-15
主要介绍了Element Collapse 折叠面板的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jQuery EasyUI 1.3 API 中文教程
05-30
api+实例解析 对于普通系统开发绝对够用了 演示范例 拖动与菜单 一般拖动 - Draggable 拖放 - DragDrop 拖放二 - DragDrop 拖放三 - DragDrop 缩放 - Resizable 滑动条 - Slider 菜单 - Menu 菜单按钮 - MenuButton 分隔按钮 - SplitButton 树形菜单 - Tree/li> 可编辑树形菜单 - Editable Tree 按钮与布局 链接按钮 - LinkButton 分隔按钮 - SplitButton 简单的布局面板 - Easy
uniapp使用uview组件的checkbox循环列表操作
DoDo_zzt21的博客
01-25 2632
uniapp使用uview组件的checkbox循环列表操作
Checkbox 复选框 + Collapse 折叠面板
泊一的博客
11-19 2439
Checkbox 复选框
uniapp组件库中Collapse 折叠面板 的使用方法
精通前端技术，了解后端接口
01-20 3477
在此组件中，可以通过多个方式对每个Item如果想修改头部标题的字体大小，颜色等，可以通过head-style参数修改。
vue3中el-collapse-item不想点整个标题折叠和展开
康歌的专栏
05-30 1412
vue3中el-collapse-item不想点整个标题折叠和展开
react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）
坚强的泡沫的博客
06-27 1442
react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）
van-collapse折叠面板，边框重叠，如何解决
06-01
可以尝试使用 `border-collapse: separate;` 属性来解决边框重叠的问题。具体实现方法如下： 1. 在 `van-collapse` 组件的父级容器中添加以下样式： ...这样就可以解决 `van-collapse` 折叠面板中边框重叠的问题了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值