模擬實現select組件功能

 最近有個頁面須要用到select，UI給定了特定的樣式，可是瀏覽器默認select的樣式改不了，因此本身模擬實現一個

頁面結構

<div class="buildSelect timeSelect">
    <div class="sel_show" id="timeText"> </div>
    <div class="text"><span>按默認時間</span><i class="fa fa-angle-down"></i></div>
    <ul class="selectList">
       <li data-type="px_time" data-code="">按默認時間</li>
       <li data-type="px_time" data-code="1">時間正序</li>
       <li data-type="px_time" data-code="0">時間倒序</li>
    </ul>
</div>

js實現：

思路：一、由於要實現的功能是點擊select框，列表出現，再點擊框或者其餘區域列表隱藏。

           二、因此須要在select框上在定位一個透明的div做爲顯示列表的按鈕。即div#timeText

　　　三、

    /**
     * 右側篩選欄點擊select彈出公共事件
     */
    function select_cli_down(obj){
        $('body').on('click',obj,function(){
            $(this).siblings('.text').find('i').addClass('fa-angle-up').removeClass('fa-angle-down');
            $(this).siblings('.text').addClass('on_cli');
            $(this).siblings('.selectList').slideDown(100);
            $(this).hide();
        });
    }
     
    /**
     * 點擊其餘區域select收起公共事件
     */
    function select_cli_up(obj){
        //點擊select框之外的區域select收縮
        $('body').on('click',(e)=> {  
            let e = e || window.event; //瀏覽器兼容性   
            let elem = e.target || e.srcElement;
            if (elem.id && elem.id === obj) {  
                return;  
            }//點擊的不是div或其子元素   
            $('#'+obj).siblings('.text').removeClass('on_cli')
                .find('i').addClass('fa-angle-down').removeClass('fa-angle-up');
            $('#'+obj).siblings('.selectList').slideUp(100);
            $('#'+obj).show();
        });
         
    }

css樣式

　　　　　　　　　　　　//自定義select樣式
                    .buildSelect{
                        background:#fff;
                        margin:0 5px;
                        float:left;
                        cursor:pointer;
                        position:relative;
                        display:none;
                        .sel_show{
                            position:absolute;
                            width:100%;
                            height:24px;
                            top:0;
                            left:0;
                            background:url(about:blank);
                        }
                        .text{
                            width:100%;
                            height:24px;
                            border:1px solid #dcdcdc;
                            padding:0 10px;
                            color:#555;
                            i{
                                display:inline-block;
                                width:14px;
                                line-height:23px;
                                float:right;
                                color:#d8d8d8;
                                text-align:right;
                                margin-left:10px;
                                font-size:18px;
                            }
                        }
                        //點擊時添加class
                        .on_cli{
                            border-color:$color;
                            color:$color;
                            i{
                                color:$color;
                            }
                        }
                        .selectList{
                            width:100%;
                            display:none;
                            padding:5px 0;
                            border:1px solid #da2d29;
                            border-top:none;
                            li{
                                height:26px;
                                line-height:26px;
                                color:#555;
                                padding-left:10px;
                                cursor:pointer;
                            }
                            li:hover{
                                color:$color;
                            }
                        }
                    }