仿生Select

$(function(){
	$('.select').on('click','span',function(){
		$(this).text();
		$(this).addClass('active');
		$(this).next().slideDown();
		return false;
	})
	$('.select').on('click','ul li',function(){
		var txt = $(this).text();
		$(this).parent().prev().text(txt);
		$(this).parent().prev().removeClass('active');
		$(this).parent().slideUp();
		return false;
	})
	
	$(document).click(function(event){
		var _con1 = $('.select ul');  
		if(!_con1.is(event.target) && _con1.has(event.target).length === 0){ 
			_con1.slideUp();
			$('.select span').removeClass('active');
		}
	});
})

<div class="select">
	<span>请选择型号</span>
	<ul>
		<li><a href="javascript:;">1</a></li>
		<li><a href="javascript:;">2</a></li>
		<li><a href="javascript:;">3</a></li>
	</ul>
</div>

.select { position: relative;
	span {
		display: block; position: relative; border: 1px solid #e4e4e4; line-height: 48px; padding: 0 15px; @include sl;
		&:after {content: ''; display: block; width: 21px; height: 12px;background: url(../images/icon_xiala.png) center 0 /cover no-repeat; @include translateYCenter; right: 20px; cursor: pointer;transition: all .5s;}
		&.active:after {
			transform: translateY(-50%) rotate(180deg);
		}
	}
	ul {display: none; position: absolute; width: 100%; top: 100%; z-index: 9; background-color: #fff; border: 1px solid #e4e4e4;  border-top: none;
		li { line-height: 40px;
			a {display: block; padding: 0 20px;}
			a:hover { background-color: $green; color: #fff;}
		}
	}
}