<pre name="code" class="html"> <style>
body,ul, p{
margin: 0;
padding: 0;
}
body{
background-color: greenyellow;
color: black;
}
.content{
padding-top: 5%;
}
.content .select{
width: 300px;
height: 40px;
margin: 0 auto;
background-color: #fff;
line-height: 40px;
position: relative;
}
.content .select:after{
content:'';
display: block;
width: 10px;
height: 10px;
border-left: 1px solid #000;
border-bottom:1px solid #000;
position: absolute;
top:11px;
right: 12px;
transform:rotate(-45deg);
transition:transform .3s ease-out, top .3s ease-out;
}
.content .select p{
padding: 0 15px;
cursor: pointer;
line-height: 40px;
}
.content .select ul{
width: 100%;
list-style-type: none;
background-color: #ffffff;
overflow-y: auto;
position: absolute;
top: 40px;
left: 0;
max-height: 0;
transition:max-height .3s ease-out;
}
.content .select ul li{
padding: 0 15px;
}
.content .select ul li.selected{
background-color: cadetblue;
}
.content .select ul li:hover{
background-color: #9e9e9e;
cursor: pointer;
}
.content .select.open:after{
transform:rotate(-225deg);
top: 18px;
}
.content .select.open ul{
max-height: 250px;
-webkit-animation:slide-down .5s ease-in;
transiton:max-height .2s ease-out;
transform-origin:50% 0;
}
@-webkit-keyframes slide-down{
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)}
}
</style>
<div class="content">
<div class="select">
<p>所有选择</p>
<ul>
<li data-value="所有选择" class="selected">所有选择</li>
<li data-value="html">html</li>
<li data-value="css">css</li>
<li data-value="jQuery">jQuery</li>
</ul>
</div>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></span>
<script>
$(function () {
$(".select > p ").on("click",function(e){
$(".select").toggleClass('open');
e.stopPropagation()
})
$(".select ul li").on("click",function(e){
var _this = $(this);
$(".select > p").text(_this.attr("data-value")); //".select > p" 选择 select 的子元素
_this.addClass("selected").siblings().removeClass('selected'); //siblings() 选择兄弟节点
$(".select").removeClass("open");
e.stopPropagation()
})
$(document).on("click",function(){
$(".select").removeClass("open");
})
})
</script>