通过点击任何其他位置来隐藏显示/切换div。

Question

我能够创建一个简单的显示/隐藏jQuery功能，如下面的代码所示...

我想让它显示div时用户不必点击按钮，使其隐藏再次。所以，当他们点击页面上的其他地方或当他们向下滚动时，它消失......

我试着重复这个相同的功能，但用body替换#hideshow但是搞砸了一切。

我可以帮忙吗？

<a type='button' id='hideshow' value='hide/show' ><li class="glob">About</li></a> 

jQuery(document).ready(function(){ 
jQuery('#hideshow').live('click', function(event) {   
    jQuery('#about_box').slideToggle('show'); 
}); 
}); 

Answer 1

首先，.live()已过期，并在jQuery 1.9中删除。您应该使用.on()。其次，如果你在body或document之类的地方放置点击处理程序，则需要在不想触发它的元素上放置一个点击处理程序，并让其调用event.stopPropagation()。

Answer 2

尝试使用.blur()事件。

jQuery('#hideshow').blur(function() { 
    jQuery('#about_box').slideUp(); 
}); 

Answer 3

尝试http://jsfiddle.net/X5xBs/

$(document).ready(function(){ 
$('#hideshow').on('click', function(event) {   
    $('#about_box').slideToggle('show'); 
}); 
    $('#hideshow').mouseleave(function() { 
    $('#about_box').slideToggle('hide'); 
}); 
});