Jquery 如何停止容器触发功能

如果单击lt后隐藏了

.hidden

（包含所有单击标题、图标或空格的内容），则将显示

.hidden

。 那么如何使只点击

。图标

的

。隐藏

将变为隐藏

现在它不工作了，单击

。图标后什么也没发生。。。我猜是因为
.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;}

$（'.lt'）。在（{'click'：function（）上{
如果（！$（'.$（'.hidden'）。为（：可见）'））{
var src=“b”；
$（'.icon img'）.attr（'src'，src）；
$（'.hidden'）.show（）；
}
});
$（'.icon'）。在（{'click'：function（）上{
如果（$（'.$（'.hidden'）。为（：可见）'））{
var src=“a”；
$（'.icon img'）.attr（'src'，src）；
$（'.hidden'）.hide（）；
}
});
.hidden{显示：无；}
看起来您需要停止嵌套元素事件的传播：

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

.stopPropagation（）
是您所需要的，但在
条件下，您的代码有问题：

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

谢谢你提醒我没有注意到你应该用这个。。
$('.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();
   }
});