1. 程式人生 > >【4】自定義下拉框

【4】自定義下拉框

order viewport down jquer pos bottom last png 下拉框

<!DOCTYPE html> <html lang="en">

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>模擬下拉框</title> <style> <!-- CSS-->

* {margin:0;padding:0}
ul,li {list-style:none;}
.selectTotal {width:200px;position:relative;font-size:12px;}
.selectText {height:100%;line-height:40px;padding-left:10px;border:1px solid #c1c1c1;}
.selectLi {height:28px;line-height:28px;padding-left:10px;}
.selectLi:hover {background:#ff5d5b;color:white;}
.selectLiLast {border-bottom:none;}
.selectUl {border:1px solid #c1c1c1;border-top:none;display:none;position:absolute;top:42px;left:0;width:198px;}
.arrow {position:absolute;top:19px;right:10px;height:6px;}

</style> </head> <!-- HTML--> <div class="selectTotal"> <div class="selectText">河南</div> <ul class="selectUl"> <li class="selectLi" value="1">河南</li> <li class="selectLi" value="2">蘇州</li> <li class="selectLi" value="3">海南</li>
<li class="selectLi selectLiLast" value="4">大連</li> </ul> <img src="1.png" class="arrow"> </div> </body> <script src="jquery.js"></script> <!-- JS--> <script> $(".selectText,.arrow").click(function (ev) { ev.stopPropagation(); var ul = $(".selectUl"); if (ul.css("display") == "none") { ul.slideDown("fast"); } else { ul.slideUp("fast"); } });

$(".selectLi").map(function () { $(this).click(function () { var txt = $(this).text(); $(".selectText").html(txt); $(".selectUl").hide(); console.log($(this).attr(‘value‘)); }); })

//當點擊空白處,隱藏列表 $(document).click(function () { $(‘.selectUl‘).hide(); });

</script>

</html>

【4】自定義下拉框