Question

如果点击过后隐藏.hidden（包含标题或图标或空格的所有点击），.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();
   }
});

如何停止容器触发功能

2 个答案: