ui、li模拟下拉框

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

效果图：

 

 

 

 

HTML：

　<div class="rank_top">

　　　　<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：

<style type="text/css">
　　.rank_top_1_ul{
　　　　width: 300px;
　　　　height: 50px;
　　　　display: block;
　　　　float: left;
　　　　margin-top: 20px;
　　　　margin-left: 50px;
　　}

　　.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：

<script type="text/javascript" >
window.onload=function(){
// 选择员工点击事件
var $staffSelectt_Ul_li = document.querySelectorAll(".rank_top_1_ul li");

$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)';
}
}
}
};

 

如有问题，欢迎留言！