<!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>