<!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" alt="" 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>
