因为我是个前端小白,所以有些问题可能写的不太恰当,希望大家能够包容指正。
我要实现的功能是,点击下拉选择框
html部分:
<div class="selectBox">
<i></i>
<span>PM2.5</span>
<ul class="selectItem">
<li>PM10</li>
<li>O3</li>
<li>SO2</li>
</ul>
</div>
css部分:
.selectBox {
position: absolute;
top: 4.25rem;
right: 0.1rem;
box-sizing: border-box;
width: 1.6rem;
height: 0.6rem;
background: rgba(100, 151, 191, 1);
border-radius: 0.1rem;
border: 1px solid rgba(106, 193, 235, 1);
cursor: pointer;
line-height: 0.6rem;
span {
margin-left: 0.25rem;
}
.tranform {
transform: translateY(-50%) rotate(180deg);
margin-top: 0px;
}
ul {
display: none;
width: 100%;
position: absolute;
background: rgba(100, 151, 191, 0.8);
box-shadow: 0px 0px 4px 0px rgba(140, 140, 140, 0.5);
border-radius: 0.1rem;
top: 0.8rem;
left: 0;
z-index: 999;
padding: 5px 0;
color: #fff;
text-align: center;
}
i {
position: absolute;
right: 0.25rem;
top: 50%;
margin-top: -0.05rem;
width: 0;
height: 0;
border-right: 0.1rem solid transparent;
border-left: 0.1rem solid transparent;
border-top: 0.1rem solid #fff;
transition: all .2s ease-in-out;
}
}
js部分:
$('.selectBox').click(function() {
$(this).children('i').toggleClass('tranform')
$(this).children('ul').slideToggle();
});
$('.selectItem>li').click(function() {
let selectText = $(this).text()
$(this).parent().siblings('span').text(selectText)
})