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;

    });
  });
});

当我点击它之外时如何隐藏div

4 个答案: