<body>部分————————简单的布个局
<body>
<div id="box">请选择手机名称</div>
<div id="down">
<ul class="phones">
<li>华为</li>
<li>小米</li>
<li>oppo</li>
<li>vivo</li>
<li>爱疯</li>
<li>三星</li>
</ul>
</div>
</body>
<style>部分
<style> #box{ color: aliceblue; width: 110px; height: 25px; border: 1px solid #c5c5c5; border-radius: 10px; background-color: #797777; text-align: center; /* text-indent: 5px; */ font-size: 14px; line-height: 25px; cursor: pointer; } #down{ border: 1px solid #c5c5c5; width: 90px; margin-left: 5px; display: none; } ul{ padding: 0; margin: 0; } li{ list-style: none; font-size: 14px; border-bottom: 1px dashed #c5c5c5; text-align: center; height: 25px; line-height: 25px; color: aliceblue; background-color: #333; cursor: pointer; } li:hover{ background-color: #5c0e0e; } </style>
<script>部分————————实现功能的部分
<script>
var obox = document.getElementById("box");
var odown = document.getElementById("down");
var oli = document.querySelectorAll("li");
console.log(oli);
var timer;
//当点击obox时，呈现出下拉列表的内容，给个延时效果
obox.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
odown.style.display = "block";
},300)
///选中列表中的某一项并将其呈现在box中,隐藏下拉列表
for(var i=0;i<oli.length;i++){
oli[i].n = i;
oli[i].onclick = function(){
obox.innerHTML = this.innerHTML;
odown.style.display = "none";
clearInterval(timer);
}
}
}
</script>
带有小三角的下拉框
<
div
class=
"wrap"
>
<
ul
>
<li></li>
....
</
ul
>
<
div
class=
"triangle1"
></
div
>
<
div
class=
"triangle2"
></
div
>
</
div
>
/*三角*/
.wrap>
ul{
position:
relative;
left:
0px;}
.wrap {
position:
relative;
top:
-2530px;
left:
-250px;
background-color:
rgb(
15,
14,
14);
border:
1px
solid
grey;
width:
160px;
height:
550px;
z-index:
999;
display:
none;
margin:
0
auto;
}
.triangle1 {
display:
block;
position:
absolute;
width:
0px;
height:
0px;
border:
8px
solid
transparent;
border-bottom-color:
rgb(
112,
106,
106);
top:
-17px;
left:
20px;
margin:
0
auto;
}
.triangle2 {
display:
block;
position:
absolute;
width:
0px;
height:
0px;
border:
8px
solid
transparent;
top:
-16px;
border-bottom-color:
rgb(
14,
13,
13);
left:
20px;
margin:
0
auto;
}