最近在寫(xiě)項(xiàng)目的時(shí)候想要一個(gè)這樣的效果，
我知道這個(gè)效果在 flat-ui中有， 但是我又不想引用一整個(gè)flat-ui;
這個(gè)效果依賴html5的transition， 所以瀏覽器兼容成問(wèn)題；
從flat-ui中把這個(gè)效果的js和html，以及css給撥離出來(lái)；
整體的代碼如下：
運(yùn)行下面代碼
<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title></head><body><h1>toggle的demo</h1><style>.toggle {background-color: #8AB9E3;border-radius: 60px;color: white;height: 29px;margin: 5px 12px 12px 0;overflow: hidden;*zoom: 1;display: inline-block;zoom: 1;*display: inline;-webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;-webkit-backface-visibility: hidden;-webkit-box-sizing: initial}.toggle:before, .toggle:after {display: table;content: "";}.toggle:after {clear: both;}.toggle.toggle-off {background-color: #cbd2d8;}.toggle.toggle-off .toggle-radio {/*background-image: url("../images/icon-off.png")*/;background-position: 0 0;color: white;left: 0;margin-left: 0.5px;margin-right: -13px;z-index: 1;}.toggle.toggle-off .toggle-radio:first-child {left: -120%;}.toggle .toggle-radio {/*background: url("../images/icon-on.png") right top no-repeat;*/color: #0275d8;display: block;font-weight: 700;height: 21px;left: 120%;margin-left: -13px;padding: 5px 32px 3px;position: relative;text-align: center;z-index: 2;-webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;-webkit-backface-visibility: hidden;}.toggle .toggle-radio:first-child {margin-bottom: -29px;left: 0;}.toggle input {display: none;position: absolute;outline: none !important;display: block/9;opacity: 0.01;filter: alpha(opacity=1);zoom: 1;}.toggle.toggle-icon {border-radius: 6px 7px 7px 6px;}.toggle.toggle-icon.toggle-off {border-radius: 7px 6px 6px 7px;}.toggle.toggle-icon.toggle-off .toggle-radio {/*background-image: url("../images/block-off.png");*/background-position: 0 0;}.toggle.toggle-icon .toggle-radio {/*background-image: url("../images/block-on.png");*/background-position: 62px 0;border-radius: 6px;min-width: 27px;text-align: right;}.toggle.toggle-icon .toggle-radio:first-child {text-align: left;}</style><div class="toggle pull-left"><label class="toggle-radio" for="toggleOption2">ON</label><input type="radio" name="toggleOptions" id="toggleOption1" value="option1" checked="checked"><label class="toggle-radio" for="toggleOption1">OFF</label><input type="radio" name="toggleOptions" id="toggleOption2" value="option2"></div><script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script><script>//toggle插件的js代碼var toggleHandler = function(toggle) {var toggle = toggle;var radio = $(toggle).find("input");var checkToggleState = function() {if (radio.eq(0).is(":checked")) {$(toggle).removeClass("toggle-off");} else {$(toggle).addClass("toggle-off");}};checkToggleState();radio.eq(0).click(function() {$(toggle).toggleClass("toggle-off");});radio.eq(1).click(function() {$(toggle).toggleClass("toggle-off");});};$(".toggle").each(function(index, toggle) {toggleHandler(toggle);});</script></body></html> 整體的效果是依賴于jQuery， 當(dāng)用戶點(diǎn)擊了label按鈕會(huì)觸發(fā)input的click事件， 然后判斷給父級(jí)添加不同的classname；
