jQuery切换隐藏在其他地方点击 [英] jQuery toggle hide on click elsewhere

问题描述

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

This may be a very simple but never used this type of things so no idea how to do.

我使用fadeToggle来显示隐藏div

I am using fadeToggle to show hide div an

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

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

It is working fine.. (obviously nothing complex :P ) now what I want is to hide it when user click elsewhere on the screen.

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

Can anyone help me to make it happen?... thanks a lot

推荐答案

试试这个：

$('#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 &由于事件冒泡而导致的文档事件。为了阻止我们使用 e.stopPropagation（） 在这里运作。


• $(document).click event is triggered whenever a user click anywhere in the page.
• It might happen that the user clicks on the account-toggle element. This will trigger both the #account-toggle & document event due to event bubbling. To stop that we have used the e.stopPropagation() function here.

这篇关于jQuery切换隐藏在其他地方点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！