实现checkbox点击出现侧边抽屉效果

最新推荐文章于 2026-05-03 09:23:24 发布
原创 最新推荐文章于 2026-05-03 09:23:24 发布 · 291 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文探讨了在页面设计中，如何优化checkbox选中状态与侧边栏可见性的联动效果。作者分享了一开始遇到的问题：关闭侧边栏时取消选中checkbox仍会触发侧边栏显示。通过调整checkbox绑定的函数，只在选中时触发侧边栏可见性变化，实现了更精准的交互体验。

今天写页面时要实现一个功能 实现选中一个checkbox后侧边出现抽屉效果
在这里插入图片描述
一开始想的比较简单 使用@change函数在checkbox上绑定一个方法 实现侧边栏visible的变化即可 结果发现不是这么回事
在选中该checkbox后 会出现侧边栏 但是在关闭侧边栏时 再取消选中checkbox 还是会触发@change绑定的函数 使侧边栏出现 这是我们不愿意看到的
于是我将checkbox绑定的函数做了些修改：
在这里插入图片描述
e.target.checked即为获取当前事件checkbox是否选中 若选中为true 未选中为false 只有在选中时才能触发下方改变visible函数

dat_stick
关注
网站抽屉菜单（jquery实现）
09-08
网站抽屉菜单（jquery实现）。JS 网站 抽屉菜单 jquery 导航。javascript
左侧栏点击出现抽屉
05-25
Android 侧滑菜单之 DrawerLayout 的使用 - 上线资源包，（包括ppt和源码）点击标题栏的图标，出现测拉栏，但左滑无效。
vxe复选框勾选事件 checkbox-change的使用
chy的博客
10-08 1万+
​ vxe vxe-grid 复选框 checkbox-change 勾选事件
vue中checkbox组件的@change事件触发父组件的冒泡事件
Cainannan1995的博客
05-06 1544
【代码】vue中checkbox组件的@change事件触发父组件的冒泡事件。
@change=“changeChecked(index)“
m0_63596578的博客
03-20 909
@change="changeChecked(index)"
el-checkbox 多选框的change 事件自定义传参
weixin_45225432的博客
02-16 2332
【代码】el-checkbox 多选框的change 事件自定义传参。
关于@check-change触发多次的坑
CSDNsusu的博客
02-29 707
只要替换成@check事件即可，获取第二个参数checkedNodes即可拿取所选节点。@check-change节点选中状态发生变化时的回调。若有多个节点，则会触发多次。el-tree 树形控件。
侧边导航栏（抽屉式设计）界面 (html + css)
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
做侧边抽屉效果
ZhangXuxiaoqingnian的博客
08-08 514
地址 https://blog.csdn.net/smile_Running/article/details/96985403 <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" android:layout_width="match_parent" ...
MDC React核心组件深度指南：Button、Card、Checkbox等30+组件详解
最新发布
gitblog_00119的博客
05-03 667
MDC React（Material Components for React）是Google官方推出的Material Design组件库，为React开发者提供了30+高质量UI组件，帮助快速构建符合Material Design规范的现代Web应用。本文将详解Button、Card、Checkbox等核心组件的特性、使用方法和最佳实践，让你轻松掌握这个强大的组件库。 [![MDC Reac
React Native Magnus核心组件全解析：从Button到Drawer的实战应用
gitblog_01175的博客
03-10 977
React Native Magnus是一个实用优先的React Native UI框架，它提供了丰富的组件库，帮助开发者快速构建美观且功能强大的移动应用界面。本文将深入解析React Native Magnus的核心组件，从基础的Button到复杂的Drawer，带你掌握它们的实战应用技巧。 ## 为什么选择React Native Magnus？ React Native Magnus以其
关于ElementUI的CheckBox多选框数据回显
JackMa的博客
12-23 6588
获取的数据值进行匹配，如果相同就会数据回显，显示已选。因为ElementUI已经封装好了，会自动匹配。数据需要和label标签值相同才能数据回显。例如上图，需要回显已选的数据。点击分配，则会显示回显的数据。
element 多选框 @change事件怎样保留默认参数，并传递自定义参数(学习篇)
skyblue_afan的博客
06-09 5950
可以使用es6箭头函数写法，如下所示 <el-checkbox @change="(val) => handleCheckAllChange(val, scope.row)">{{ scope.row.label }}</el-checkbox> di
checkbox的change事件（IE浏览器change事件问题及解决方法）
lwf的博客
10-25 1万+
在JQuery中，当给radio或checkbox添加一个change事件时，如果它的值发生变化就会触发change事件。 $('document').ready(function(){ $('#checkbox').change(function(){ alert('checked'); }) })上面几行代码在Firefox等浏览器中
el-checkbox的change事件
热门推荐
nineteenthdog的博客
06-17 3万+
<template> <div> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
checkbox 选中触发change事件- 微信小程序开发技术要点总结（二）
Nicolege678的博客
06-28 1万+
在待办小程序中，我们通过点选checkbox来表明该事项已完成，也就是说当我们点选该checkbox的时候需要绑定一个触发函数，通过点选事件来触发后续的动作，将值存储起来，这样我们重新进入小程序的时候，待办项的完成情况就还是和上次更新的内容一样。 按照官方文档所说，小程序里面选中单个checkbox，会触发 checkbox-group的change事件，所以我们需要在checkbox标签外面加一个check-group标签。并通过 bindchange 绑定触发事件后的处理函数。H5 代码： js 代
element -- el-checkbox @change 携带参数
m0_62015496的博客
06-15 2049
element -- el-checkbox @change 携带参数
component-右侧抽屉组件
岂不闻
03-22 698
点击筛选，右侧抽屉滑出，点击取消或者点击空白处抽屉收起。
JQuery触发Checkbox的change事件
志超的专栏
12-15 7276
<br />转载自:http://blog.163.com/weizi_mm/blog/static/315544201069101132204/<br />早上要做一功能，checkbox被选中时，显示隐藏的层，取消选中时，再隐藏选中的层。<br />初始代码如下：<br />$(function(){<br />    $("#ischange").change(function() {<br />        alert("checked");<br />    });<br />}); <br /
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值