html 使用ul、li 模拟 select 下拉菜單

手頭上有個項目，需要用到select。用了以後咋感覺這麼........

索性，自己用ul、li,模拟了一個select菜單。

實作效果如下

代碼很簡單。

關鍵代碼如下

html

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

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

代碼已經打包放到百度雲，需要的兄弟随便下

連結: https://pan.baidu.com/s/1z8hw8IhAYZ8_p2nY_2r6mQ 提取碼: rjr5 

本文在簡書同步發表 https://www.jianshu.com/p/e303e0298e9e

轉載，請注明出處