有時候為了想一組組件動態(tài)變化的過程的時候轩缤，總是會讓人奔潰，因為我們會陷入一種類似于“連貫性動作合成的糾結(jié)中”，我總會考慮的讓界面如何一下子“動起來”逼友，這樣的思考反而容易將我陷入糾結(jié)的狀態(tài)，有時候這種復(fù)雜的反應(yīng)也會附加在js的代碼中化借，讓本該簡單的作業(yè)卻陷入了難以維系的狀態(tài)潜慎。
解決的辦法就是 js+html+css完全分離，js則負(fù)責(zé)動作蓖康，html是骨架铐炫，css如同外衣一般。
例子
圖1
將“點擊按鈕內(nèi)容顯示/內(nèi)容消失”組件劃分為兩個狀態(tài)蒜焊，狀態(tài)1是面板消失的狀態(tài)倒信，所以先將狀態(tài)1的面板用css表現(xiàn)出來
.wrapper>.popver{
min-width:100px;
min-height:100px;
background-color:red;
display:none;
}
2當(dāng)點擊后的狀態(tài)是是面板如上圖，可以嘗試寫出狀態(tài)2的樣式如下：
.wrapper ,.active>.popver{
display:block;
}
最后用js來進(jìn)行兩種狀態(tài)的切換：
$(".wrapper").on("click",function(e){
var $wrapper=$(e.currentTarget);
if($wrapper.hasClass("active")){
$wrapper.removeClass("active");
}
else{
$wrapper.addClass("active");
}
});
效果如下：
圖三
