解决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 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 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结合表单实现一些简单功能的例子
2011/06/04 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python自带的http模块详解
2016/11/06 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Django中的session用法详解
2020/03/09 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
临床医师个人自我评价
2014/04/06 职场文书
投诉信范文
2015/07/02 职场文书
小学数学教师研修日志
2015/11/13 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
详解nginx location指令
2022/01/18 Servers