Question

我有一些代码，其中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");
} 
 );

Answer 1

我建议更改您的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/

Answer 2

我想你问题的解决方案就像是

jQuery的：

$("#webbox1").click(function(){ 
    $("#lightbox").toggle();
});

https://jsfiddle.net/d56n492x/

在儿童点击时阻止Lightbox关闭

2 个答案: