在div外部单击时关闭div的jquery

Question

我实际得到的是在： http : //jsfiddle.net/y9uwY/7/

我想要的是：

1. 如果用户单击黑色区域，则应不会出现
2. 在黑色区域之外单击必须关闭

Answer 1

试试这个小提琴，您的body标签将永远只是主要.select_roles元素的大小，因此将.select_roles和heights设置为100％可以为您提供一个可点击的隐藏区域（这在msot浏览器中有效，可以允许更多操作） ，也可能值得添加一些填充）。 这只是将.select_roles设置为display:none; .select_roles 但从.active类开始使其display:block; 一旦您在区域外单击，我们将删除.active类。

小提琴： http : //jsfiddle.net/y9uwY/3/

Answer 2

现在尝试小提琴http://jsfiddle.net/y9uwY/9/

$('.select_roles').click(function (e){
    e.stopPropagation();
                 if($(this).hasClass('active')){
                 }
                 });

            $('body').click(function (){
                 if($('.select_roles').hasClass('active')){
                     $('.select_roles').removeClass('active');
                 }
            });

Answer 3

您必须停止事件冒泡到身体。 这是更正的代码http://jsfiddle.net/y9uwY/8/

供参考和进一步阅读： 什么是事件冒泡和捕获？