如何使用javascript单击外部区域时隐藏元素？

Question

如何使用javascript点击外部区域时隐藏元素？

http://jsfiddle.net/a3MKG/35/

我尝试这样但不起作用

<script>
function showDiv(id) {    
  $("#div1").toggle();
  $(document).click(function() {
    $('#div1').fadeOut(300);
});
}   
</script>

Answer 1

您可以对文档对象使用单击处理程序，如果单击不是来自div或按钮，则隐藏div

$(document).click(function(e){
    if(!$(e.target).closest('#div1, input[name="Showdiv1"]').length){
        $('#div1').hide()
    }
})

演示：Fiddle