jquery - 防止Lightbox在 child 点击时关闭

我有一些代码，其中div在元素单击时打开，其中包含另一个div。我希望在子div外部单击时将其关闭，但是在单击任一子菜单时将其关闭。

HTML：

  <div id="gallerybox">

            <div id="webbox1" ><h1 class="codetext">Hand<br> Coded</h1></div>
            <div id="webbox2"><h1 id="musich1">Wordpress<br>Sites</h1></div>
            <div id="webbox3"><h1 id="musich1">Mobile Web<br> Apps</h1></div>

            <div id="lightbox"><div id="webbox1result"></div></div>

        </div>

CSS：

 #lightbox{
height: 100vh;
width: 100vw;
z-index: 99;
position: absolute;
display: none;
opacity: 0.5;
background-color: black;
 }
 #webbox1result{
height: 280%;
width: 90%;

position: absolute;
opacity: 0.5;
background-color: aqua;
z-index: 100;
margin-top: 7%;
margin-left: 5%;
margin-right: 5%;
 }

jQuery：

  $("#webbox1").click(function(){
$("#lightbox").css("display", "block");
}
 );
$("#lightbox").click(function(){
$("#lightbox").css("display", "none");
}
 );

最佳答案

我建议更改您的click以包含一个参数，例如以下示例中的e：.click(function(e) { ... });

然后，您可以添加if(e.target !== e.currentTarget) return;来检查点击的目标是否明确地是#lightbox。如果不是，则函数结束。

码：

$("#lightbox").click(function(e) {
    if(e.target !== e.currentTarget) return;
    $("#lightbox").css("display", "none");
});

例：

https://jsfiddle.net/th8gfe3v/

关于jquery - 防止Lightbox在 child 点击时关闭，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41620928/