當點擊觸發元素外部時隱藏元素

Question

我有一個帶有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消失。

Answer 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方法結合的偵聽一個事件，一個火災發生後毀壞它添加一個單一事件。

Answer 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

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一個名爲「禁用」，並給它要麼顯示類：無，不透明度：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(); 
});