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

一种方法是停止元素内点击事件的传播。

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

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

这将阻止事件冒泡超出这些元素。这样，在#header_wrapperor内的任何点击#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 回答