顯示div一旦點擊後隱藏，當點擊外部時隱藏

Question

我試圖在單擊鏈接時顯示＃subscribe-pop div，並在單擊任何位置時隱藏它。我可以得到它的顯示和隱藏，如果我改變：

$('document').click(function() { 

TO

$('#SomeOtherRandomDiv').click(function() { 

HTML：

<div id="footleft"> 
    <a href="#" onclick="toggle_visibility('subscribe-pop');">Click here to show div</a> 
    <div id="subscribe-pop"><p>my content</p></div> 
</div> 

腳本：

<script type="text/javascript"> 
    function toggle_visibility(id) { 
     var e = document.getElementById("subscribe-pop"); 
     if(e.style.display == 'block') 
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 
     } 
    } 

    $('document').click(function() { 
     $('#subscribe-pop').hide(); //Hide the menus if visible 
    }); 

    $('#subscribe-pop').click(function(e){ 
     e.stopPropagation(); 
    }); 
</script> 

Answer 1

你必須停止活動在你的容器中傳播（在這種情況下是'footleft'），所以父元素不會注意到事件被觸發。

事情是這樣的：

HTML

<div id="footleft"> 
    <a href="#" id='link'>Click here to show div</a> 
    <div id="subscribe-pop"><p>my content</p></div> 
</div> 

JS

$('html').click(function() { 
    $('#subscribe-pop').hide(); 
}) 

$('#footleft').click(function(e){ 
    e.stopPropagation(); 
}); 

$('#link').click(function(e) { 
    $('#subscribe-pop').toggle(); 
}); 

看到它的工作here。

Answer 2

更改$(document).click()到$('html').click()應該解決是主要問題。

其次，你不需要toggle_visibility()功能可言，你可以簡單地做：

$('#subscribe-pop').toggle(); 

編號：改變body到html按照這樣的回答：How do I detect a click outside an element?

Answer 3

我認爲提問者試圖完成一個div的jquery模式類型的顯示。

如果您想檢查此link，加載頁面會顯示一個模式div，將您的眼睛驅動到屏幕的中心，因爲它會調暗背景。

此外，我編了一個短的jsFiddle供您檢查。如果您可以按照您的要求使用jquery，那麼您也可以查看他們的網站。

這裏是代碼顯示或隱藏彈出的div

var toggleVisibility = function(){ 
    if($('#subscribe-pop').is(":not(:visible)")){ 
      $('#subscribe-pop').show(); 
     }else{ 
      $('#subscribe-pop').hide(); 
     } 
    }