【4】自定義下拉框
阿新 • • 發佈：2017-05-27
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;}
$(".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】自定義下拉框