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

手头上有个项目，需要用到select。用了以后咋感觉这么........
索性，自己用ul、li,模拟了一个select菜单。
实现效果如下

Video_2018-12-10_173821.wmv_20181210_174206.gif

代码很简单。
关键代码如下
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
本文在CSDN同步发表
https://blog.csdn.net/weixin_41659488/article/details/84944029
转载，请注明出处