Question

我的网站上有一个标题，标题有一个“按钮”，有一个Icon和一些文本。当您单击此“按钮”时，它将通过拼写类的可见性来显示或隐藏页面上的额外菜单。

<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，而不是父元素。我该如何做到这一点？

Answer 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
  }

Answer 2

一种方法是停止在元素中传播click事件。

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

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

这将阻止事件冒泡超出这些元素。这样，#header_wrapper或#menu_wrapper（或任何调用菜单）内的任何点击都不会触发文档的处理程序。

Answer 3

您可以在单击按钮时绑定事件，并在单击不在标题内部的内容时解除绑定。

.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
            }
        });
    });
});

Answer 4

试试这个

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

});

单击文档时获取事件的父div

4 个答案: