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

以下是解决问题的更新小提琴：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');
    }
});

基本上，您在点击时获得event.target，并确保它不包含在父元素中。如果有多个孩子，你可以更具体，但这应该解决它。

Answer 3

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

  $('#parent').click(function(e)
  {
    $('#child').toggle();      
  });
    $("#parent").children().click( function(e) {
    e.stopPropagation();
  });

我认为这可以解决您的问题。

jQuery：单击父元素时，隐藏子元素。单击子元素时，不要隐藏它

3 个答案: