自定义下拉复选框关闭和显示

示例图如下

样式什么的都不是问题，问题是当我实现select框显示关闭时碰到了问题。那么问题来了。点击上面输入框时显示和隐藏正常。那么点击外面空白区域怎么关闭。我之前用上了我的笨方法，就是给document绑定一个点击事件关闭这个下拉。然后给输入框和下拉框点击事件加个阻止冒泡事件。感觉为了实现这个效果用了这么多代码是在看着不舒服。

 后面网上查看了高人的代码。思想是给document绑定一个点击事件，在回调函数返回一个事件对象event。用event.target获取点击事件源。然后判断这个点击事件源是否是这个输入框。如果是，则展开下拉框，否则关闭下拉框。具体代码如下

//下拉复选框
				function hsMutileSelect(){
					$(document).on('click',function(e){
						var $el = $(e.target);
						var $warp = $el.closest('.check-select');
						if(0 < $warp.length){
							if($el.hasClass('txt')){
								var $dropdown = $warp.find('ul');
								if($dropdown.css('display') === "none"){
									$dropdown.slideDown(100);
								}else{
									$dropdown.slideUp(100);
								}
							}
						}else{
							$('.check-select>ul').slideUp(100);
						}
					})