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()在这里发挥作用。