代码如下
<!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>Document</title>
</head>
<style>
body,
p,
ul,
li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.list {
margin: 50px;
}
.content {
position: relative;
width: 150px;
height: 25px;
border: 1px solid gray;
}
.content:after {
content: '';
position: absolute;
right: 0;
top: 0;
height: 25px;
width: 25px;
background: gray;
}
.select-ul {
display: none;
width: 150px;
}
.select-ul li {
width: 150px;
border: 1px solid red;
}
.caret {
position: absolute;
top: 0;
right: 0;
width: 25px;
height: 25px;
}
.caret:after {
content: '';
position: absolute;
border-width: 5px;
border-style: solid;
left: 10px;
top: 8px;
z-index: 15;
border-color: transparent transparent transparent red;
transition: all 0.1s linear;
transform: rotate(0deg);
}
.caret_after:after {
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent red;
transform: rotate(90deg);
}
.para{
text-align:center;
height:100%;
}
</style>
<body>
<div class="list">
<div class="content">
<p class="para">我是内容</p>
<span class="caret"></span>
</div>
<ul class="select-ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
</ul>
</div>
</body>
<script>
var oUl = document.getElementsByClassName("select-ul")[0];
var oContent = document.getElementsByClassName("content")[0];
var oCaret = document.getElementsByClassName("caret")[0];
var oPara = document.getElementsByClassName("para")[0];
// 判断是否展示自定义下拉框
oContent.onclick = function () {
if (oUl.style.display == "block") {
oUl.style.display = "none";
oCaret.classList.remove('caret_after');
return;
}
oCaret.classList.add('caret_after');
oUl.style.display = "block";
}
// 点击每个列表中的元素,并且赋值在选项框
var oLi = document.getElementsByTagName("li");
for (var i = 0; i < oLi.length; i++) {
oLi[i].onclick = function () {
oPara.textContent = this.textContent;
oContent.click();
}
}
</script>
</html>
效果图