引一个jquery。
css
CSS：
html
body{jquery
margin:0;ide
padding: 0;this
font: 14px "微软雅黑";spa
background-color: #bc5122;scala
color: #fff;orm
}htm
.box{ip
padding-top: 50px;
width: 30%;
height: auto;
margin: 0 auto;
}
p,ul,li{
list-style: none;
padding: 0;
margin: 0;
}
.select{
position: relative;
width: 100%;
height: 40px;
margin: 20px 0;
}
.select_text{
overflow: auto;
cursor: pointer;
border-radius: 5px;
background-color: rgba(0,0,0,.5);
}
.options>.selected{
background-color:#2e6bc7;
color: #fff;
line-height: 40px;
padding-left: 10px;
}
.select_text>p{
padding-left: 10px;
line-height: 40px;
float: left;
}
.select_icon{
float: right;
height: 40px;
padding: 0 20px;
}
.select_icon>div{
width: 10px;
height: 10px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(-45deg);
margin-top: 12px;
}
.options{
position: absolute;
width: 100%;
top: 40px;
background-color:rgba(0,0,0,.5);
border-top: 1px solid #000;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
display: none;
}
.option{
line-height: 40px;
padding-left: 10px;
color: #ffffff;
}
.option:hover{
background-color: #acacac;
cursor: pointer;
color: #fff;
}
@keyframes play{
0%{transform: scale(1,0);}
25%{transform: scale(1,1.2);}
50%{transform: scale(1,0.85);}
75%{transform: scale(1,1.05);}
100%{transform: scale(1,1);}
}
.open>.options{
display: block;
z-index: 999;
transform-origin: 50% 0;
animation: play .5s ease-in;
}
.open>.select_text>.select_icon>div{
margin-top: 18px;
transform: rotate(135deg);
}
.open>.select_text{
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="pc_select.css" type="text/css" rel="stylesheet" media="(min-width:600px)"/>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="box">
<!--<div class="select">
<div class="select_text">
<p>请选择</p>
<div class="select_icon">
<div></div>
</div>
</div>
<ul class="options">
<li class="selected">请选择</li>
<li class="option">选项一</li>
<li class="option">选项二</li>
<li class="option">选项三</li>
</ul>
</div>
<div class="select">
<div class="select_text">
<p>请选择</p>
<div class="select_icon">
<div></div>
</div>
</div>
<ul class="options">
<li class="selected">请选择</li>
<li class="option">选项一</li>
<li class="option">选项二</li>
<li class="option">选项三</li>
</ul>
</div>-->
</div>
<script>
var createSelect=function(parentNode){
$(parentNode).html(function(i,h){
return h+='<div class="select"><div class="select_text"><p>请选择</p><div class="select_icon"><div></div></div></div><ul class="options"><li class="selected">请选择</li><li class="option">选项一</li><li class="option">选项二</li><li class="option">选项三</li></ul></div>'
});
}
createSelect(".box");
createSelect(".box");
createSelect(".box");
createSelect(".box");
createSelect(".box");
$(".select").click(function(e){
$(this).toggleClass("open");
$(this).siblings(".select").removeClass("open");
//$(".select:not($(this))").removeClass("open");
e.stopPropagation();
});
$(".options>li").click(function(e){
$(this).addClass("selected").removeClass("option");
$(this).siblings().removeClass("selected").addClass("option");
$(".open>.select_text>P").text($(this).text());
$(".select").removeClass("open");
e.stopPropagation();
});
$(document).click(function(){
$(".select").removeClass("open");
});
</script>
</body>
</html>