单击触发元素外部时隐藏元素

时间:2013-09-24 14:42:55

标签: javascript jquery html css

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

5 个答案:

答案 0 :(得分:2)

尝试

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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

})

答案 3 :(得分:0)

您可以通过更简单的方式轻松解决问题。

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

你现在只需要为你的css添加一个名为'disable'的类,并给它display:none,opacity:0或visibility:hidden。

问候Timotheus

答案 4 :(得分:0)

或者这个:

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