jQuery实现自定义下拉列表
html代码：
<divclass="dropdownContainer">
<divclass="dropdownDefault">1</div>
<spanclass="downArrowarrow"></span>
<ulclass="dropdrown-menu">
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">6</a></li>
<li><ahref="#">8</a></li>
</ul>
</div>
css代码：
.dropdownContainer{position:relative;height:30px;width:100%;background:#555;}
.dropdownDefault{border:1pxsolid#ddd;line-height:28px;text-indent:0.5em;}
.dropdownContainer.downArrow{position:absolute;right:5px;top:9px}
.dropdrown-menu{position:absolute;top:100%;width:100%;left:0;background:#555;display:none;}
.dropdrown-menuli{line-height:24px;}
.dropdrown-menulia{display:inline-block;width:100%;text-indent:0.5em}
.dropdrown-menulia:hover{background:#0078b6;font-size:1.1em;}
.arrow{width:0;height:0;display:inline-block;cursor:pointer;}
.downArrow{border-left:6pxsolidtransparent;border-right:6pxsolidtransparent;border-top:12pxsolid#fff;}
js(jquery)代码：
$(".dropdownDefault,.dropdownContainer.downArrow").click(function(){
$(this).siblings(".dropdrown-menu").show();
});
$(".dropdrown-menulia").click(function(){
$(this).parent().parent().siblings(".dropdownDefault").html($(this).html());
$(this).parent().parent().hide();
});
虽然代码很简单，但是效果是不是非常酷呢