解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题


Posted in Javascript onSeptember 03, 2019

最近开发一个基于mui框架的一个微信小程序,发现在使用mui框架中的switch开关的时候,想要达到联动的功能,让一个主开关控制几个子开关,发现虽然开关的颜色变了,但是开关上的小圆点不动,对于刚入mui框架的新手,觉得一脸的懵逼,经过多方查找,然后自己动手,解决了这个问题,就想在此分享一下。

页面上

<div class="mui-switch mui-active">
 <div class="mui-switch-handle"></div>
</div>

mui-active表示开关为打开状态,移除属性mui-active开关就是关闭状态,很显然大家都会想到利用js控制给相应的switch添加或者移除属性mui-active就可以达到动态控制开关状态,理论上是可以的,但会经常出现如下图的情况

解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题

这种情况出现的解决方法就是将 class属性为mui-switch-handle 的div的style进行清空就可以了

代码为:

<div class="mui-switch mui-active">
 <div class="mui-switch-handle"></div>
</div>

jQuery代码:

$(".mui-switch-handle").attr("style","");

$(".
mui-switch").removeClass("mui-active");

产生这个问题的原因我没有具体研究,大概是mui框架在switch进行toggle的时候在 class=mui-switch-handle的div中加入的了圆点移动的样式,所以下次要更改开关的样式的时候需要把先前的样式清空掉。

好了,忘采纳!

以上这篇解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
AngularJS Module方法详解
Dec 08 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
JS实现4位随机验证码
Oct 19 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 #Javascript
Layui给switch添加响应事件的例子
Sep 03 #Javascript
layui--js控制switch的切换方法
Sep 03 #Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 #Javascript
layui中的switch开关实现方法
Sep 03 #Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 #Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 #Javascript
You might like
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python静态方法实例
2015/01/14 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
numpy.random模块用法总结
2019/05/27 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
世界上最大的艺术社区:SAA
2020/12/30 全球购物
采购意向书范本
2014/03/31 职场文书
中文专业求职信
2014/06/20 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
婚前保证书范文
2015/02/28 职场文书
公司岗位说明书
2015/10/08 职场文书