0

私のウェブサイトにはヘッダーがあり、ヘッダーにはアイコンとテキストを持つ「ボタン」があります。この「ボタン」をクリックすると、クラスの可視性を切り替えて、ページ上の追加メニューを表示または非表示にします。

<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 のみを返します。どうすればこれを達成できますか?

4

4 に答える 4

1

あなたはこれを行うことができます：

  if ($(event.target).is('#content_wrapper *')) {
    // click somewhere inside content wrapper
  }

安全のために、ラッパー自体を確認することをお勧めします。

  if ($(event.target).closest('#content_wrapper').length) {
    // click in the wrapper, or on the wrapper itself
  }
于 2013-02-05T15:14:11.230 に答える
1

1 つの方法は、要素内でのクリック イベントの伝達を停止することです。

$(document).click(function(event){
  // hide
});

$("#header_wrapper, #menu_wrapper").click(function(e){
    e.stopPropagation();
});

これにより、これらの要素を超えたイベントのバブリングが停止します。このように、#header_wrapperまたは#menu_wrapper(またはメニューが呼び出されたもの) 内をクリックしても、ドキュメントのハンドラーはトリガーされません。

于 2013-02-05T15:17:00.793 に答える
0

ボタンがクリックされた瞬間にイベントをバインドし、ヘッダー内ではない何かがクリックされたときにバインドを解除できます。

.parent() 関数はセレクターを取ります。このようにして、要素が別の要素の中にあるかどうかを確認できます。

$(function() {
    // The selector of the button that gets pressed
    $('#favuorites_header_font').on('click', function() {

        // Insert your [toggle to visible] code here

        $(document.body).on('click.hidemenu', function(event) {
            // Check if the clicked element is outside the header
            if( $(event.target).parent('#header_area').length === 0 ) {
                // Its outside, unbind the (namespaced, to not destroy other code) event.
                $(document.body).off('click.hidemenu');


                // And insert your [toggle to hidden] code here
            }
        });
    });
});
于 2013-02-05T15:16:26.687 に答える
0

これで試してください

$(document).click(function(event){
 el=event.target.id;
 if($("#"+el).parent().get(0).id=="content_wrapper"){
   //hide
}

});
于 2013-02-05T15:22:54.793 に答える