ui、li模拟下拉框

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

转载：原文地址：https://www.jianshu.com/p/e303e0298e9e

效果图：

HTML：

<div class="rank_top_1">
<ul class="rank_top_1_ul">
<li><span>请选择员工</span> <i><img src="箭头.png"></i></li>
<li><img src="a1.jpg">111111</li>
<li><img src="a1.jpg">22222</li>
<li><img src="a1.jpg">3333</li>
<li><img src="a1.jpg">44444</li>
<li><img src="a1.jpg">55555</li>
<li><img src="a1.jpg">666666</li>
</ul>
</div>
</div>

CSS：

.rank_top_1_ul li {
display: block;
line-height: 50px;
height: 50px;
width: 300px;
background-color: greenyellow;
color: black;
text-align: center;

}
.rank_top_1_ul li img{
height: 100%;
margin-left: 0px;
left: 0px;
float: left;
}

.rank_top_1_ul li i img{
height: 100%;
margin-left: 0px;
left: 0px;
float: right;
transform: rotate(0deg);
}

.rank_top_1_ul li:not(:first-child){
display: none;
}
.rank_top_1_ul li:not(:first-child):hover{
background-color: grey;
color: white;
}
</style>

JS：

$staffSelectt_Ul_li[0].onclick = function(){
//获取小箭头对象
var $imgLabel = document.querySelector(".rank_top_1_ul li:first-child img");
//获取下标为 2 的li标签的display 状态，如果是 block ，说明 li 标签已经显示了
//所以点击事件，执行的是关闭 li 标签列表的功能。反之亦然
var $tempFlag = $staffSelectt_Ul_li[1].style.display;
if($tempFlag ==="block" ){
// 小箭头旋转,回位
$imgLabel.style.transform = 'rotate(0deg)';
for(var $i=1;$i<$staffSelectt_Ul_li.length;$i++){
$staffSelectt_Ul_li[$i].style.display = "none";
}
}else{
// 小箭头旋转,90du
$imgLabel.style.transform = 'rotate(-90deg)';

for(var $i=1;$i<$staffSelectt_Ul_li.length;$i++){
$staffSelectt_Ul_li[$i].style.display = "block";
}
}
//给每个li对象都添加一个点击事件

for(var $i=1;$i<$staffSelectt_Ul_li.length;$i++){
$staffSelectt_Ul_li[$i].onclick=function(){
//将点击li 的文字赋给第一个li
$staffSelectt_Ul_li[0].firstChild.innerText = this.innerText;
// 关闭所有的 li（除了第一个）
for(var $i=1;$i<$staffSelectt_Ul_li.length;$i++){
$staffSelectt_Ul_li[$i].style.display = "none";
}
// 小箭头旋转,归位
$imgLabel.style.transform = 'rotate(0deg)';
}
}
}
};