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

 

如有問題，歡迎留言！