私のウェブサイトにはヘッダーがあり、ヘッダーにはアイコンとテキストを持つ「ボタン」があります。この「ボタン」をクリックすると、クラスの可視性を切り替えて、ページ上の追加メニューを表示または非表示にします。
<div id="header_wrapper">
<div id="header_area">
<a class="noSelect" href="#">
<div id="favuorites_header_wrapper" class="header_item">
<div id="favuorites_header_font" class="noSelect">Open Menue</div>
<div id="favuorites_header_icon" class="noSelect"></div>
</div>
</a>
</div>
<div id="hidden_favuorite_area_wrapper">
<div id="hidden_favuorite_area">Your personal area</div>
</div>
</div>
<div id="content_wrapper">foo</div>
ヘッダーまたはメニュー領域の外側をクリックすると、このメニューを再び非表示にしたいと思います。
私は試した
$(document).click(function(event){
if(event.target.id =="content_wrapper"){
// hide
}
});
しかし、event.target.id は、親ではなく clicket 要素の ID のみを返します。どうすればこれを達成できますか?