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时，你就激活了充满整个 body 的隐形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');
}