Настройка jQuery selectbox

Question

Могу ли я настроить этот плагин так, чтобы при нажатии на любое другое место в документе, кроме selectbox - его закрыть? Я пытаюсь добавить событие щелчка для тела тега, но это, кажется, не работают ..

HTML

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

CSS

.selectbox { 
    width: 100px; 
    border: 1px solid #000; 
    padding: 2px 5px; 
} 
.list { 
    background-color: #eee; 
    border: 1px #ddd solid; 
    padding: 0; 
    position: absolute; 
    list-style: none; 
    width: 100%; 
} 
.list li:hover { 
    color: #fff; 
    background-color: #00f; 
} 

JS

! function(t) { 
return t.fn.selectbox = function(e) { 
    var i; 
    return i = t.extend({ 
     customList: !1 
    }, e), this.each(function() { 
     var e, n, s, c; 
     return s = t(this).css({ 
      opacity: 0, 
      position: "absolute", 
      "z-index": 2, 
      top: 0, 
      width: "100%", 
      height: "100%" 
     }), i.customList && (n = s.children()), c = s.wrap("<div class='selectbox'></div>").parent().css({ 
      position: "relative" 
     }), c.append("<span class='value'>" + s.val() + "</span>"), i.customList && (s.hide(), e = c.append("<ul class='list'></ul>").find("ul"), n.each(function() { 
      return e.append("<li>" + this.text + "</li>") 
     }), e.hide()), s.on("change", function() { 
      return c.children(".value").text(t(this).val()), !1 
     }), i.customList && (c.click(function() { 
      return e.toggle(), !1 
     }), e.children().click(function() { 
      return e.toggle(), s.val(n.eq(e.children().index(this)).attr("value")).trigger("change"), !1 
     })), t(this) 
    }) 
}, !1 
}(jQuery); 

и с этим кодом крюком up

$('select').selectbox({customList: true}); 

Вот JsFiddle DEMO

Answer 1

Вы можете скрыть параметры, как это, связать щелчок по документу и проверить, если переключатель нажат или нет, то скрыть.

$(document).on('click',function(e){ 
    if(!$(e.target).is('select')){ 
     $('.selectbox ul').hide(); 
    } 
}); 

DEMO

Answer 2

Вы можете слушать document на щелчки и просто скрыть .selectbox ul теги. Так как <select>, естественно, ест событие клика, чтобы остановить его пузырь до документа, вам не нужно беспокоиться о проверке того, откуда произошло событие - вы знаете, что это не из selectbox.

Как правило, вы должны быть очень осторожны в привязке обработчиков событий к документу, но поскольку это не должно часто вызываться слишком часто (щелчок), это довольно редкое событие), вы должны быть в порядке.

Это должно работать:

(function($) { 
    $(document).on('click', function(e) { 
     $('.selectbox').find('ul').hide(); 
    }); 
})(jQuery); 

Here's an example jsFiddle