2013-09-24 256 views
0

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

+0

謝謝大家的時間和建議。找到解決方案 –

回答

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

+0

我找到了解決方案,即使我沒有嘗試過,我也會接受你的解決方案。並且我會將我的解決方案作爲編輯添加到您的解決方案中,請接受我的編輯。 –

+1

@whitelettersandblankspaces如果您找到自己的解決方案,請發佈您自己的答案。 –

+0

Okey,無論如何感謝你的時間。我強調你的方法。 +1 –

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

+0

我會讓文檔在click事件中單擊'once'並添加它。 – cgTag

+0

@MathewFoscarini是好主意 –

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

}) 
0

你可以在一個更簡單的方法輕鬆地解決它。

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

你現在只需要添加到您的CSS一個名爲「禁用」,並給它要麼顯示類:無,不透明度:0或visibility:hidden的。

問候提摩太

+0

我相信你沒有看完整個問題。 – matewka

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