jquery - 如何停止容器触发功能

Question

如果.hidden在单击 lt 后隐藏（包含所有单击标题或图标或空间），.hidden则会显示。.icon那么如何让只有点击.hidden才会变成隐藏呢？

现在它不起作用，点击后.icon什么也没有发生......我猜是因为.icon在里面.lt，点击时.icon也会.lt触发点击然后隐藏执行.lt点击功能？

$('.lt').on({'click': function() {
    if(!$('.$('.hidden').is(:visible)')){
        var src="b";
        $('.icon img').attr('src', src);
        $('.hidden').show();
    }
});
$('.icon').on({'click': function() {
    if($('.$('.hidden').is(:visible)')){
        var src="a";
        $('.icon img').attr('src', src);
        $('.hidden').hide();
    }
});

<div class="lt">
    <div class="title">
    </div>
    <div class="icon">
        <img src="a">
    </div>
    <div class="hidden">
    </div>
</div>

.hidden{display:none;}

Answer 1

看起来您需要停止传播嵌套元素的事件：

$('.icon').on({'click': function(e) {
    e.stopPropagation();
    //...
});

Answer 2

.stopPropagation()是您需要的，但您的代码存在问题if：

$('.lt').on({'click': function() {
   if(!$('.hidden').is(':visible')){  //<----change this way here
      var src="b";
      $('.icon img').attr('src', src);
      $('.hidden').show();
   }
});

在上面的脚本中，您可以检查隐藏的直线if($('.hidden').is(':hidden')){

---

在下面，您必须.stopPropagation()停止事件以在树中冒泡到其父级。

$('.icon').on({'click': function(e) {
   e.stopPropagation();               //<----it stops the event bubbling
   if($('.hidden').is(':visible')){   //<----this should also be changed to this
      var src="a";
      $('.icon img').attr('src', src);
      $('.hidden').hide();
   }
});