有时候为了想一组组件动态变化的过程的时候，总是会让人奔溃，因为我们会陷入一种类似于“连贯性动作合成的纠结中”，我总会考虑的让界面如何一下子“动起来”，这样的思考反而容易将我陷入纠结的状态，有时候这种复杂的反应也会附加在js的代码中，让本该简单的作业却陷入了难以维系的状态。
解决的办法就是 js+html+css完全分离，js则负责动作，html是骨架，css如同外衣一般。
例子
图1
将“点击按钮内容显示/内容消失”组件划分为两个状态，状态1是面板消失的状态，所以先将状态1的面板用css表现出来
.wrapper>.popver{
min-width:100px;
min-height:100px;
background-color:red;
display:none;
}
2当点击后的状态是是面板如上图，可以尝试写出状态2的样式如下：
.wrapper ,.active>.popver{
display:block;
}
最后用js来进行两种状态的切换：
$(".wrapper").on("click",function(e){
var $wrapper=$(e.currentTarget);
if($wrapper.hasClass("active")){
$wrapper.removeClass("active");
}
else{
$wrapper.addClass("active");
}
});
效果如下：
图三
网友评论