ライトボックスが子供のクリックを閉じるのを防ぐ

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

私は、次の例のeのように、パラメータを含めるようにclickを変更することをお勧めしたいです。 .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/