javascript - 在触发元素外部单击时隐藏元素

Question

我有一个.post-control带有 onClick 事件的 div。点击后，出现一个内部div .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 消失。

Answer 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;
});

演示：小提琴

Answer 2

您可以为关闭您的整个文档添加一个事件.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方法将侦听器绑定到事件并在一次触发后将其销毁。

Answer 3

$('.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();
    }

})

Answer 4

您可以以更简单的方式轻松解决它。

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

您现在只需向您的 css 添加一个名为“disable”的类，并为其指定 display:none、opacity:0 或 visibility: hidden。

问候提摩太

Answer 5

或这个：

 $('.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();
 });