自定义下拉列表
html代码：
1 <div class="dropdownContainer"> 2 <div class="dropdownDefault">1</div> 3 <span class="downArrow arrow"></span> 4 <ul class="dropdown-menu"> 5 <li><a href="#">1</a></li> 6 <li><a href="#">2</a></li> 7 <li><a href="#">6</a></li> 8 <li><a href="#">8</a></li> 9 </ul> 10 </div>
css代码：
1 .dropdownContainer{position: relative;height: 30px;width: 100%;background: #555;} 2 .dropdownDefault{border:1px solid #ddd;line-height: 28px;text-indent: 0.5em;} 3 .dropdownContainer .downArrow{position: absolute;right: 5px;top: 9px} 4 .dropdown-menu{position: absolute;top:100%;width: 100%;left: 0;background: #555;display: none;overflow-y:scroll;} 5 .dropdown-menu li{line-height: 24px;} 6 .dropdown-menu li a{display: inline-block;width: 100%;text-indent: 0.5em} 7 .dropdown-menu li a:hover{background: #0078b6;font-size: 1.1em;} 8 .arrow{width: 0;height: 0;display: inline-block;cursor: pointer;} 9 .downArrow{border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #fff;}
js(jquery)代码：
1 $(".dropdownDefault,.dropdownContainer .downArrow").click(function(){ 2 $(this).siblings(".dropdown-menu").show(); 3 }); 4 5 $(".dropdown-menu li a").click(function(){ 6 $(this).parent().parent().siblings(".dropdownDefault").html($(this).html()); 7 $(this).parent().parent().hide(); 8 });
