在写示例的时候,用到了下拉框,但是原生的下拉框是在是有点难看,然后模仿着写了点,一个是直接在写好的Dom上进行美化,一个是用js生成,然后定义类名及相应的事件来处理
1.效果图
2.直接是在Dom上美化
<div class="root">
<div id="selectedItem">
<div id="promptText"><span id="spanText">请选择你喜欢的文字</span><img src="../images/arrowup.png" id="arrows" /></div>
<ul class="choiceDescription">
<li class="item">万水千山,陪你一起看</li>
<li class="item">万水千山,陪你一起看1</li>
<li class="item">万水千山,陪你一起看2</li>
<li class="item">万水千山,陪你一起看3</li>
<li class="item">万水千山,陪你一起看4</li>
</ul>
</div>
</div>
ul{
margin: 0;
padding: 0;
list-style: none;
}
/* 下拉框包含层 */
#selectedItem{
width: 240px;
cursor: pointer;
}
/* 已选中的选项 */
#promptText{
position: relative;
padding-left: 10px;
width: 230px;
height: 30px;
line-height: 30px;
border: 1px solid #d3d3d3;
border-radius: 4px;
background: #fff;
color: #999;
font-size: 14px;
}
/* 图标 */
#arrows{
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
vertical-align: middle;
}
#arrows:focus{
outline: none;
}
/* 下拉可选项包含层 */
.choiceDescription{
position: absolute;
display: none;
/*overflow: hidden;*/
margin-top: 2px;
width: 240px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
background: #fff;
}
.show{
display: block;
}
/* 下拉可选项 */
.item{
height: 30px;
line-height: 30px;
padding-left: 10px;
font-size: 15px;
color: #666;
}
.item:hover{
color: #fff;
background: rgba(49, 255, 195, 0.67);
}
(function() {
let choiceDescription = document.getElementsByClassName('choiceDescription')[0];
let arrows = document.getElementById('arrows');
/* 用于判断是否是下拉 */
let isDown = false;
let selectedItem = document.getElementById('selectedItem');
/* 对点击下拉进行监听 */
selectedItem.addEventListener('click', function() {
isDown = !isDown;