自定義UI下拉列表Select

上班第一時間就是上來發文章，哈哈~！今天分享一點干貨——“自定義UI下拉列表Select”，是項目中用到的公用模塊，主要是分享CSS方面及HTML結構方面的東西。JS寫的很簡單，目地是為了擴展性，方便攻城師們在此基礎上做更多的擴展，應用到項目中去。你也可以直接前往DEMO頁

CSS和HTML就不貼出來了，有點小長。

有必要貼出來的是一個JavaScript常用方法：(依賴jQuery)

//點擊document隱藏下拉框
$(document).bind('click', function (e){
    $(initSelect).each(function(){//遍布下拉框
        var $this = $(this);
        var tit = $this.find(titCss);
        var _isHide = function (target, box, source){//看點擊的是否為當前下拉框下的某元素、或事件源，封裝成一個函數_isHide
            return target.closest(box).length || target.get(0) === source.get(0);
        };
        var status = _isHide($(e.target), $this, tit);
        if (!status) $this.removeClass(activeCss); //后處理
    });
});

此處所說的常用方法實際是指上述中的 _isHide 方法，整個代碼的用處是點擊document隱藏下拉框，讀者如果是抄代碼的肯定行不通，因為你不知道真正值得抄的是哪句。呵呵~見笑了~！

Author：前端組-Tab