学步园

上班第一时间就是上来发文章，哈哈~！今天分享一点干货——“自定义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