html：
<div class="content">
<span>单位名称：</span> <div class="select"> <p data-value="-1">请选择</p> <ul class="all-animate"> <li data-value="单位#1">单位#1</li> <li data-value="单位#2">单位#2</li> </ul> </div> </div>css：
/**
* 下拉列表*/ .content{ width: 22%; display: inline-block; margin-bottom: 1rem; } .content>span{ width: 50%; } .content .select{ display: inline-block; width: 50%; height: 3rem; line-height: 3rem; background: #FFFFFF; position: relative; cursor: pointer; border: 1px solid #dcdcdc; border-radius: 0.5rem; } .content .select::after{ content: ""; display: block; width: 10px; height: 10px; border-left: 1px solid #D0D0D0; border-bottom: 1px solid #D0D0D0; top: 12px; right: 12px; position: absolute; transform: rotate(-46deg); transition: all .3s ease-in; } .content .select p{ width: 80%; line-height: 3rem; font-size: 1.2rem; font-family: "microsoft yahei"; color: #666666; padding: 0px 15px; } .content .select ul{ border: 1px solid #dcdcdc; border-radius: 0.5rem; width: 100%; display: none; font-size: 1.2rem; background: #FFFFFF; position: absolute; top: 3rem; left: 0px; max-height: 0px; overflow: hidden; z-index: 999; transition: max-height .3s ease-in; } .content .select ul li{ width: 100%; height: 3rem; line-height: 3rem; padding: 0px 15px; list-style: none; color: #666666; } .content .select ul li.Selected{ background: #FF8000; color: #FFFFFF; } .content .select ul li:hover{ background: #FF8000; color: #FFFFFF; } @-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);} }.content .select.open ul{
display: block; max-height: 30rem; transform-origin: 50% 0; -webkit-animation: slide-down .5s ease-in; transition: max-height .2s ease-in; } .content .select.open::after{ transform: rotate(134deg); transition: all .3s ease-in; top: 18px; }js:
/**
* 下拉列表*/$(function(){
$(".select p").click(function(e){ $(".select").removeClass("open"); $(this).parent().toggleClass('open'); e.stopPropagation(); }); $(".content .select ul li").click(function(e){ var _this=$(this); _this.parent().prev().text(_this.text()); _this.parent().prev().attr('data-value',_this.attr('data-value')); _this.addClass("Selected").siblings().removeClass("Selected"); _this.parent().parent().removeClass("open"); e.stopPropagation(); }); $(document).on('click',function(){ $(".select").removeClass("open"); }) });