mui框架中switch开关通过js控制开或者关状态时小圆点不动问题
2017-07-07 09:55
1286 查看
最近开发一个基于mui框架的一个微信小程序,发现在使用mui框架中的switch开关的时候,想要达到联动的功能,让一个主开关控制几个子开关,发现虽然开关的颜色变了,但是开关上的小圆点不动,对于刚入mui框架的新手,觉得一脸的懵逼,经过多方查找,然后自己动手,解决了这个问题,就想在此分享一下。
页面上
mui-active表示开关为打开状态,移除属性mui-active开关就是关闭状态,很显然大家都会想到利用js控制给相应的switch添加或者移除属性mui-active就可以达到动态控制开关状态,理论上是可以的,但会经常出现如下图的情况
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/07/5c7f1209506154ede2cbac6bde320e32)
这种情况出现的解决方法就是将 class属性为
$(".
产生这个问题的原因我没有具体研究,大概是mui框架在switch进行toggle的时候在 class=mui-switch-handle的div中加入的了圆点移动的样式,所以下次要更改开关的样式的时候需要把先前的样式清空掉。
好了,忘采纳
页面上
<div class="mui-switch mui-active"> <div class="mui-switch-handle"></div> </div>
mui-active表示开关为打开状态,移除属性mui-active开关就是关闭状态,很显然大家都会想到利用js控制给相应的switch添加或者移除属性mui-active就可以达到动态控制开关状态,理论上是可以的,但会经常出现如下图的情况
这种情况出现的解决方法就是将 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","");
$(".[/code][/code][/code][/code][/code][/code]mui-switch").removeClass("mui-active");
产生这个问题的原因我没有具体研究,大概是mui框架在switch进行toggle的时候在 class=mui-switch-handle的div中加入的了圆点移动的样式,所以下次要更改开关的样式的时候需要把先前的样式清空掉。
好了,忘采纳
相关文章推荐
- 通过js控制radio类型按钮选中状态
- 通过js判断访问来自移动端还是pc端从而去控制事件的逻辑或者元素的显示
- MAC OSX通过Terminal命令行控制蓝牙状态开关
- java通过代码控制线程状态,解决线程不安全的问题。
- 通过js框架jquery判断IE浏览器版本来解决浏览器兼容性问题
- mui的手机侧滑容器如何可以通过js来控制?
- mui js控制开关状态、修改switch开关的值
- struts2——学习笔记2 通过form表单方式或者js的方式提交请求,封装boolean值的问题
- js,jquery,不能通过true/false控制radio的选中状态,prop,attr,
- 通过radio和js控制div里的内容显示或者隐藏
- css实现switch开关,js控制
- ios 解决第一个页面是通过loadData或者是loadHtml时返回控制的问题
- 【iOS遇到的问题】switch控件--在设置switch按钮状态为on或者off,运行app,模拟器黑屏
- 通过js框架jquery判断IE浏览器版本来解决浏览器兼容性问题
- 如何通过JS控制父级别框架可是高度
- struts2/jsp 通过form表单方式或者js的方式提交请求,封装boolean值的问题
- MUI class="mui-switch"开关 JQuery 控制开关
- IE下通过JS控制剪贴板的代码
- js 对象外部访问或者调用问题
- 持久层框架中通过Record对象获取Blob对象值导致java堆栈溢出的问题