javascript - jQuery:单击父元素时，隐藏子元素。单击子元素时，不隐藏它

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

您可以通过将事件绑定(bind)到 child 并停止传播来实现这一点。

  $('#parent').click(function() {
     $('#child').toggleClass('display');
  });
  $('#child').click(function(e) {
     e.stopPropagation();
  });

可以找到更多信息here

Updated Fiddle