解決mui框架中switch開關(guān)通過(guò)js控制開或者關(guān)狀態(tài)時(shí)小圓點(diǎn)不動(dòng)的問(wèn)題
最近開發(fā)一個(gè)基于mui框架的一個(gè)微信小程序，發(fā)現(xiàn)在使用mui框架中的switch開關(guān)的時(shí)候，想要達(dá)到聯(lián)動(dòng)的功能，讓一個(gè)主開關(guān)控制幾個(gè)子開關(guān)，發(fā)現(xiàn)雖然開關(guān)的顏色變了，但是開關(guān)上的小圓點(diǎn)不動(dòng)，對(duì)于剛?cè)雖ui框架的新手，覺(jué)得一臉的懵逼，經(jīng)過(guò)多方查找，然后自己動(dòng)手，解決了這個(gè)問(wèn)題，就想在此分享一下。
頁(yè)面上
<div class="mui-switch mui-active"> <div class="mui-switch-handle"></div> </div>
mui-active表示開關(guān)為打開狀態(tài)，移除屬性mui-active開關(guān)就是關(guān)閉狀態(tài)，很顯然大家都會(huì)想到利用js控制給相應(yīng)的switch添加或者移除屬性mui-active就可以達(dá)到動(dòng)態(tài)控制開關(guān)狀態(tài)，理論上是可以的，但會(huì)經(jīng)常出現(xiàn)如下圖的情況
這種情況出現(xiàn)的解決方法就是將 class屬性為mui-switch-handle 的div的style進(jìn)行清空就可以了
代碼為：
<div class="mui-switch mui-active"> <div class="mui-switch-handle"></div> </div>
jQuery代碼：
$(".mui-switch-handle").attr("style","");
$(".
mui-switch").removeClass("mui-active");
產(chǎn)生這個(gè)問(wèn)題的原因我沒(méi)有具體研究，大概是mui框架在switch進(jìn)行toggle的時(shí)候在 class=mui-switch-handle的div中加入的了圓點(diǎn)移動(dòng)的樣式，所以下次要更改開關(guān)的樣式的時(shí)候需要把先前的樣式清空掉。
好了，忘采納！
以上這篇解決mui框架中switch開關(guān)通過(guò)js控制開或者關(guān)狀態(tài)時(shí)小圓點(diǎn)不動(dòng)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript利用canvas實(shí)現(xiàn)鼠標(biāo)跟隨特效
canvas是一個(gè)很神奇的玩意兒，比如畫表格、畫海報(bào)圖都要用canvas去做。本文就來(lái)利用canvas制作個(gè)簡(jiǎn)單的鼠標(biāo)跟隨特效，快跟隨小編一起學(xué)習(xí)一下吧2022-10-10
主要用到了js的dom操作，用到了rows 集合。2009-12-12
javascript實(shí)現(xiàn)des解密加密全過(guò)程
這篇文章主要介紹了javascript 實(shí)現(xiàn)des解密加密的過(guò)程,需要的朋友可以參考下2014-04-04
javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲
這篇文章主要介紹了js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲,涉及javascript結(jié)合html5進(jìn)行圖形操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要針對(duì)Js的Array數(shù)組對(duì)象為大家進(jìn)行詳細(xì)的講解，感興趣的小伙伴們可以參考一下2016-02-02
JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解
這篇文章主要介紹了webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了javascript函數(shù)，幫助大家更好的理解js函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
在開發(fā)項(xiàng)目的過(guò)程中，我們經(jīng)常會(huì)需要關(guān)于javascript數(shù)組的一些算法，比方說(shuō)數(shù)組去重、數(shù)組求交集、數(shù)組擾亂等等。今天就把個(gè)人的匯總整理的算法分享給大家。2016-02-02