jQuery切换隐藏在其他地方点击

Question

这可能是一个非常简单但从未使用过这种类型的东西所以不知道该怎么做。

我正在使用fadeToggle来显示隐藏div

$('#account-toggle').click(     
function(){
    $('#account-toggle').toggleClass('account-active');
    $('.account-group').fadeToggle('fast');
});

它工作得很好..（显然没什么复​​杂的：P）现在我想要的是当用户点击屏幕上的其他地方时隐藏它。

任何人都可以帮我实现吗？...非常感谢

Answer 1

试试这个：

$('#account-toggle').click(function(e){
    e.stopPropagation();
    $(this).toggleClass('account-active');
    $('.account-group').fadeToggle('fast');
});

$(document).click(function(){
    $('#account-toggle.account-active').removeClass('account-active');
    $('.account-group:visible').hide();
});

只要用户点击页面中的任意位置，就会触发
• $(document).click事件。
• 用户可能会点击account-toggle元素。这将触发#account-toggle＆amp;由于事件冒泡导致的document事件。为了阻止我们在这里使用e.stopPropagation()功能。