html - 当我点击它外部时如何隐藏一个div

Question

这个问题与我在这里找到的许多其他问题相似，我找不到对我有用的正确答案。

我的所有内容都是使用 .ajax() 方法加载的，事件是使用 .on() 处理的。首先，我尝试使用 .stopPropagation() 停止函数的传播，它以某种方式工作。它关闭了 div，但之后我按下它的任何元素仍然使用关闭函数。我通过搜索发现在我需要使用 .off() 方法的网络上。

这是代码（使其更短）：

$("#pnNotaCom").on("click",function(){
   $(".cautareProdNouNC").css({"display":"block"});
    $("html").on("click",function(){
        $(".cautareProdNouNC").css("display","none");
    });
});

$(".cautareProdNouNC").click(function(e){
    e.stopPropagation();
});

$("#pnNotaCom").click(function(e){
    e.stopPropagation();
});

我显示/隐藏的 div 是.cautareProdNouNC

Answer 1

我就是这样做的。当你激活你的 div 时，你激活了可以满足整个身体的隐形 div。单击该 div 会隐藏它们。

HTML

<div class="cautareProdNouNC display_none"></div>
<div class="overlay display_none"></div><!--place it in body-->

CSS

.cautareProdNouNC {
    position relative; /*this div needs to be above overlay so needs z-index*/
    z-index: 200;
}
.display_none {
    display: none;
}
.overlay {
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

jQuery

$("#pnNotaCom").on("click",function(){
$(".cautareProdNouNC").removeClass('display_none');
$(".overlay").removeClass('display_none');
});

$(".overlay").on("click",function(){
$(this).addClass('display_none');
$(".cautareProdNouNC").addClass('display_none');
}

Answer 2

$(document).delegate('click', function(){
    if($('#Div2Hide').get(0) != $(this).get(0)){ 
        $('#Div2Hide').hide();
        e.stopPropagation();
    }
});

Answer 3

试试这个

$(document).mouseup(function (e) {
var container = $(your hiding div selector here);

if (!container.is(e.target) // if the target of the click isn't the container...
&&
container.has(e.target).length === 0) // ... nor a descendant of the container
{
    container.hide();
}
});

Answer 4

我希望我能正确理解你的问题！

这个DEMO怎么样：

$(document).ready(function() {

var div_hide = false;

$("#one").on("click",function(e){
    e.stopPropagation();
    alert("You click the div");      

    $(document).on("click",function(){

        if (div_hide === false) { // You can click once after that 
                                  // we set "div_hide" to "true"

               $(".hide_me").hide();
               div_hide = true;              
        }

      return false;

    });
  });
});