jquery - 通过单击其他任何位置来隐藏显示/切换 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');
});
});