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();
});
虽然代码很简单，但是效果是不是非常酷呢
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短