默认关闭样式:class="myradio mrclose" 默认开启样式:class="myradio mropen"
.myradio {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
width: 80px;
height: 30px;
border-radius: 20px;
position: relative;
overflow: hidden;
}
.mrclose {
background-color: #e8e8e8;
}
.mropen {
background-color: #67e66c;
} 对元素绑定相应的click事件,分别获取多个开关的点击状态。
$(".myradio input").click(function(e){
var state = e.delegateTarget.defaultValue;
var myradio = $(".myradio");
var iclose = $(this).parents(".myradio").find('.close');
// console.log(iclose);
var iopen = $(this).parents(".myradio").find('.open');
// console.log(state);
$(this).parents(".myradio").find(':radio').removeAttr('checked');
$(this).parent('label').addClass('disabled');
$(this).parent('label').siblings('label').find(':radio').attr('checked',true);
if (state == 'open') {
$(this).parents(".myradio").removeClass('mropen').addClass('mrclose');
open();
} else {
$(this).parents(".myradio").removeClass('mrclose').addClass('mropen');
close();
}
function open(){
iopen.animate({left:"50px"},100);
setTimeout(function(){
iopen.hide();
iclose.show();
iopen.css('left',0);
$(".myradio label").removeClass('disabled');
},300);
}
function close(){
iclose.animate({left:"0px"},100);
setTimeout(function(){
iclose.hide();
iopen.show();
iclose.css('left','50px');
$(".myradio label").removeClass('disabled');
},300);
}
})
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
