jQuery：親要素をクリックすると、子要素を非表示にします。子要素がクリックされたときに非表示にしないでください

Question

ページ上の特定のボタンをクリックして表示/非表示にする子要素を持つ親要素があります。ボタンはスタイルをdisplay：noneからdisplay：block、かなり単純に変更します。子要素はdisplay：none;で始まります。

子要素がクリックされたときにこの要素を非表示にしたいが、子要素が親要素のであるため、問題がある。

data（）があることがわかりました。は、要素がクリックされたかどうかを確認できますが、動作していないようです。ここで

はhtmlです：

<style> 

#parent {width:200px;height:200px;} 
#child {display:none;width:50px;height:50px;} 
#child.display {display:block;} 

</style> 

<div id="parent"> 
Some content 
    <div id="child">Some other content</div> 
</div> 

<button id="clickMe">Toggle Child</button> 

そして、ここではjQueryのです：

$(function() 
{ 
    $('#clickMe').click(function() 
    { 
     $('#child').toggleClass('display'); 
    }); 

    $('#parent').click(function() 
    { 
    if($('#child').data('clicked') == true) 
    { 
     // do nothing 
    } else 
    { 
     $('#child').toggleClass('display'); 
    } 
    }); 
}); 

この例のために私は、デフォルトでは子要素を隠しました。心配しないで、私は生産でそれをやっていません。私はちょうどこの基本機能をどうやって行うのかを考えています。ここで

はそれのデモへのリンクです：jsfiddle

Answer 1

あなたが子供にイベントを結合することによってそれを達成し、伝播を停止することができます。

$('#parent').click(function() { 
    $('#child').toggleClass('display'); 
    }); 
    $('#child').click(function(e) { 
    e.stopPropagation(); 
    }); 

詳しい情報はhere

Updated Fiddle

Answer 2

を見つけることができるここでの問題解決と更新フィドルです：基本的に、あなたはクリックでevent.targetを取得https://jsfiddle.net/6u39dfxd/1/

$('#clickMe').click(function() { 
    $('#child').toggleClass('display'); 
}); 

$('#parent').click(function(event) { 
    if($(this).has(event.target).length === 0) { 
     $('#child').toggleClass('display'); 
    } 
}); 

とそれが親要素内に含まれていないことを確認してください。複数の子供がいる場合、より具体的になる可能性がありますが、これで解決するはずです。

Answer 3

これはあなたの問題を解決すると思います。