kaiguan 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.btn-toggle{
    width: 100px;
    height: 30px;
    position: relative;
    border-radius: 20px;
    background-color: #6699cc;
    
}

 .btn-checkbox{
    position: absolute;
    left:-4px;
    top:-3px;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
}

.btn-style{
    position: absolute;
    z-index: 9;
    height: 26px;
    width: 45px;
    background-color: #fff;
    border-radius: 20px;
    transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
    transition-property: all;
    left:2px;
    top:2px;
}


.btn-toggle .btn-checkbox:checked + .btn-style{
    left:53px;
}

.btn-sex{
    position: absolute;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #fff;

}

 .btn-toggle .left{
    padding-left: 20px; 
}


 .btn-toggle .right{
    padding-left: 65px;
}

select::-ms-expand{ display: none; }

/* --火狐、谷歌清除--*/

select{
     appearance:none;  
    -moz-appearance:none;  
    -webkit-appearance:none;
     background: url("arrow.png") no-repeat scroll right center transparent;
     padding-right: 14px;
}

option::-ms-expand{ display: none; }
option{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari 和 Chrome */
    appearance:none;
}
/* --背景色字体颜色--*/
option:hover{
    color:#fff;
    background-color:#1E90FF;
}

ul li{
    list-style: none;
}
</style>
</head>

<body>
<button>课表推送</button>
<div class="btn-toggle">
    <input type="checkbox" class="btn-checkbox" checked="checked">
    <div class="btn-style"></div>
    <div class="btn-sex left">
        男
    </div>
</div>
<div class="box">
    <div class="shi">
        <input type="text" name="" readonly="readonly" value="">
        <ul>
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
        </ul>
    </div>
    <div class="fen">
        <input type="text" name="" readonly="readonly">
        <ul>
            <li>001</li>
            <li>002</li>
            <li>003</li>
            <li>004</li>
            <li>005</li>
        </ul>
    </div>

    
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/***********性别按钮特效＊＊＊***********/
    $(function () {
        var onOff = true;
        $('.btn-toggle').on('click',function(){
            var oToggle = $(this);
            var oSex = oToggle.children('.btn-sex');a

            if(onOff){
                oToggle.css("background-color","#ccc");
                oSex.text('女').removeClass('left').addClass('right');
                onOff = false;
            }else {
                oToggle.css("background-color","#6699cc");
                oSex.text('男').removeClass('right').addClass('left');
                onOff = true;
            }

        });
        $(".shi ul").css('display','none');
        $(".fen ul").css('display','none');
        $(".shi input").click(function(){
            
            $(this).siblings('ul').css('display','block')    
            
        });
         $('.shi ul li').click(function(){
                var lival=$(this).text();
                $(this).parent('ul').siblings('input').val(lival);
                $(this).parent('ul').css('display','none')
        });


         $(".fen input").click(function(){
            
            $(this).siblings('ul').css('display','block')    
            
        });
         $('.fen ul li').click(function(){
                var lival=$(this).text();
                $(this).parent('ul').siblings('input').val(lival);
                $(this).parent('ul').css('display','none')
        })
       
    })
</script>
</html>

 

posted @ 2018-04-03 10:24  Jinsuo  阅读(211)  评论(0)    收藏  举报