css模拟下拉框美化效果

var aLi = $("ul li");
			var onOff = true;
			$("#box p").click(function() {
				if (onOff) {
					$("#box ul").removeClass("hide").addClass("show");
					$("#box span").css("transform", "rotate(180deg)");
					onOff = false;
				} else {
					$("#box ul").removeClass("show").addClass("hide");
					$("#box span").css("transform", "rotate(360deg)");
					onOff = true;
				}
			})
			$.each(aLi, function(i) {
				aLi[i].index = i;
				
				aLi.eq(i).click(function() {
					//console.log(1)
					onOff = true;
					$("#box p").html($(this).html()) ;
					$("#box ul").removeClass("show").addClass("hide");
					$("#box span").css("transform", "rotate(360deg)");
				})
			})

<div id="box">
			<p>请选择</p>
			<span class="iconfont iconfont-menu-down"></span>
			<ul class="hide">
				<li>请选择</li>
				<li>HTML</li>
				<li>JavaScript</li>
				<li>HTML5</li>
				<li>CSS3</li>
			</ul>
		</div>

<style type="text/css">
			*{ margin: 0; padding: 0;}
			body{ background: #69d2f9; font: 14px/30px "microsoft yahei";}
			.hide{ display: none;}
			.show{ display: block;}
			#box{ position: relative; top: 50px; left: 50%; width: 200px; height: 30px; background: #fff; border-radius: 5px; margin-left: -100px;}
			p{ width: 185px; height: 30px; padding-left: 15px; line-height: 30px; cursor: pointer;}
			span{ position: absolute; top: 14px; right: 10px; line-height: 0; transition: .5s;}
			ul{ width: 100%; padding: 10px 0; background: #f9f9f9; border-radius: 5px;}
			li{ list-style: none; width: 175px; height: 30px; margin: 0 auto; padding-left: 5px; line-height: 30px; transition: .7s; cursor: pointer;}
			li:hover{ background: #91ecfa;}

		</style>

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/434

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！