下拉选择框 css,09.CSS3实现下拉选择框

支持动画效果。

请选择

• 所有选项
• javascript
• html
• css

和外部容器相关的盒子样式省略了，只看具体里面的实现

.boxes .box1 .select{

margin-top: 10px;

width: 80%;

}

.boxes .box1 .select p{

width:100%;

text-align: center;

background-color:blanchedalmond;

padding:10px 0 ;

}

.boxes .box1 .select ul{

width: 100%;

max-height: 0px;

overflow-y: hidden;

}

.boxes .box1 .select li{

background-color: blanchedalmond;

padding: 10px;

height: 1.5em;

list-style: none;

border: 1px white solid;

cursor: pointer;

}

.boxes .box1 .select li:hover{

background-color: lightblue;

}

/*给p添加一个伪元素，作为小箭头，小箭头其实是左边框和右边框旋转45度*/

.boxes .box1 .select p:after{

display: block;

content: '';

width: 10px;

height: 10px;

border-left:2px skyblue solid;

border-bottom:2px skyblue solid;

transform: rotate(135deg);

float: right;

margin-top: 5px;

margin-right: 10px;

}

.boxes .box1 .select .active{

background-color: lightblue!important;

}

.boxes .box1 .select.open ul{

max-height: 400px;

transition: all 0.3s ease-in;

}

.boxes .box1 .select.open p:after{

transform: rotate(-45deg);

transition: all 0.3s ease-in;

}

.boxes .box1 .select.close ul{

max-height: 0px;

transition: all 0.3s ease-in;

}

.boxes .box1 .select.close p:after{

transform: rotate(135deg);

transition: all 0.3s ease-in;

}

js主要的作用就是添加class和删除class

window.οnlοad=function () {

let ul=document.getElementById("box1ul");

/*为选中的li添加背景色*/

ul.addEventListener("click",function (e) {

let li=ul.children;

/*首先移除所有的li中的active类*/

for(let i=0;i

if(li[i].classList){

li[i].classList.remove("active");

}

}

/*之后为点击的li添加active类*/

e.target.classList.add("active");

let title=document.getElementById("title");

title.innerText=e.target.innerText;

},false);

/*为点击头部(p)添加打开关闭*/

let p=document.getElementById("title");

p.addEventListener("click",function () {

let select=document.getElementsByClassName("select")[0];

/*如果select中包括open类，那么就添加关闭类，删除open类，关闭类中实现了ul的max-height设置为0，

以及三角的旋转角度改变*/

if(select.classList.contains("open")){

select.classList.add("close");

select.classList.remove("open");

}

else{

select.classList.add("open");

select.classList.remove("close");

}

})

};