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&document事件.为了阻止我们在e.stopPropagation()这里使用了这个功能.