当点击触发元素外部时隐藏元素

我有一个带有onClick事件的div .post-control。点击后，出现内部分区.post-control-popover。第二次点击后，内部div将消失。我正在使用的代码：当点击触发元素外部时隐藏元素

$('.post-control').click(function(e){ 

     $(this).toggleClass("active"); 

    var bool = $('.post-control').hasClass('active');  

      if(bool) 
     { 
        $('.post-control-popover').show(); 
     } 
     else 
     { 
        $('.post-control-popover').hide(); 
     } 


    e.preventDefault();  
});

我该如何添加到此代码中，以便在外部div外部的onClick将使内部div消失。

来源

2013-09-24 whiteletters in blankpapers

谢谢大家的时间和建议。找到解决方案 –

您可以对整个文档关闭您的.post-control-popover

$('.post-control').click(function(e){ 
    $(this).toggleClass("active"); 
    var bool = $('.post-control').hasClass('active');  

    if(bool) 
    { 
     $('.post-control-popover').show(); 
     $(document).one('click', function() { 
      $('.post-control-popover').hide(); 
     }); 
    } 
    else 
    { 
     $('.post-control-popover').hide(); 
    } 

    e.preventDefault();  
});

one方法结合的侦听一个事件，一个火灾发生后毁坏它添加一个单一事件。

来源

2013-09-24 14:46:23 matewka

我找到了解决方案，即使我没有尝试过，我也会接受你的解决方案。并且我会将我的解决方案作为编辑添加到您的解决方案中，请接受我的编辑。 –

@whitelettersandblankspaces如果您找到自己的解决方案，请发布您自己的答案。 –

Okey，无论如何感谢你的时间。我强调你的方法。 +1 –

尝试

var $pc = $('.post-control'), 
    $pcp = $('.post-control-popover'); 
$pc.click(function (e) { 
    $(this).toggleClass("active"); 
    $pcp.toggle($(this).hasClass('active')); 

    $(document).one('click', function() { 
     $pc.removeClass("active"); 
     $pcp.hide() 
    }) 

    return false; 
});

演示：Fiddle

来源

2013-09-24 14:48:40

我会让文档在click事件中单击'once'并添加它。 – cgTag

@MathewFoscarini是好主意 –

$('.post-control').click(function(e){ 
    $('.post-control-popover').show(); 
}); 

$('body').click(function(e){ 
    e.preventDefault(); 
    if(e.currentTarget.class != 'post-control-popover') { 
     $('.post-control-popover').hide(); 
    } 

})

来源

2013-09-24 14:50:09

你可以在一个更简单的方法轻松地解决它。

$('.post-control').click(function(e){ 
    $('.post-control-popover').toggleClass('disable'); 
});

你现在只需要添加到您的CSS一个名为“禁用”，并给它要么显示类：无，不透明度：0或visibility：hidden的。

问候提摩太

来源

2013-09-24 14:50:54

我相信你没有看完整个问题。 – matewka

或者这样：

$('.post-control').click(function(e){ 



     $(this).toggleClass("active"); 

    var if_post_control_active = $('.post-control').hasClass('active'); 
     if(if_post_control_active) 
     { 
        $('.post-control-popover').show(); 

$(document).click(function() { 
    $('.post-control-popover').hide(); 
}); 
     } 
     else 
     { 
        $('.post-control-popover').hide(); 
     } 


    e.preventDefault(); 
    e.stopPropagation(); 
});

来源

2013-09-24 14:51:14

当点击触发元素外部时隐藏元素

回答

相关问题