ul-li(div)下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ul-li的下拉列表</title>
<style>
#sel {
display: table-cell;
}
ul#ul {
list-style: none;
border: 1px solid #ccc;
background-color: #fff;
display: table-cell;
margin: 0;
padding: 0;
}
ul#ul li {
height: 22px;
line-height: 22px;
}
ul#ul li:focus {
min-height: 1.2em;
}
ul#ul li:hover {
background-color: rgba(12,145,229,.9);
color: #fff;
}
</style>
</head>
<body>
<label for="sel"></label><select name="" id="sel" style="width:50%">
</select>
<ul id="ul">
<li> 1</li>
<li> 1</li>
<li> 1</li>
<li> 1</li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$("#ul").hide();
$("#sel").unbind('click').on("click", function (e) {
e.stopPropagation();
// 解决有时显示重复问题
$("#sel").blur();
ulStyle();
$("#ul").toggle();
});
// 点击页面其他区域隐藏下拉列表
$(document).on("click",function () {
$("#ul").hide();
});
// 浏览器切换tab页隐藏下拉列表
document.addEventListener('visibilitychange', function () {
if (document.visibilityState === 'hidden') { // 状态判断
$("#ul").hide();
}
});
// ul下拉样式
function ulStyle() {
$("#ul li").css("width", "auto");
$("#ul").css("width", "auto");
// 如果宽度太小的话让它等于下拉框宽度
if ($("#ul").width() < 359) {
$("#ul").css("width", $("#sel").width());
}
}
</script>
</body>
</html>
还有一个问题,浏览器窗口大小改变的时候,ul的宽度等于初始化时下拉列表的宽度,而下拉列表是相对宽度,随窗口大小改变,所以宽度不相等。