最近開發(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框架的新手，覺得一臉的懵逼，經(jīng)過多方查找，然后自己動(dòng)手，解決了這個(gè)問題，就想在此分享一下。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站與策劃設(shè)計(jì),昭蘇網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:昭蘇等地區(qū)。昭蘇做網(wǎng)站價(jià)格咨詢:13518219792

頁面上

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)行清空就可以了

代碼為：

jQuery代碼：

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

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

產(chǎn)生這個(gè)問題的原因我沒有具體研究，大概是mui框架在switch進(jìn)行toggle的時(shí)候在 class=mui-switch-handle的div中加入的了圓點(diǎn)移動(dòng)的樣式，所以下次要更改開關(guān)的樣式的時(shí)候需要把先前的樣式清空掉。

好了，忘采納！

以上這篇解決mui框架中switch開關(guān)通過js控制開或者關(guān)狀態(tài)時(shí)小圓點(diǎn)不動(dòng)的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。