當外部點擊時隱藏div

我正在使用一個簡單的JavaScript代碼來切換div onclick。你可以在這個鏈接上看到它的行動：k-prim.biz/Untitled-2.html - 這是一個非常簡單的演示頁面。我想要做的就是不僅在點擊「鏈接」時隱藏div，而且在點擊div之外時也會隱藏div。另外，如何在顯示div時更改「鏈接」的CSS樣式？先謝謝你！當外部點擊時隱藏div

<script type="text/javascript" language="javascript"> 
    function showHide() { 
    var ele = document.getElementById("showHideDiv"); 
if(ele.style.display == "block") { 
     ele.style.display = "none"; 
    } 
else { 
    ele.style.display = "block"; } 
} 
</script> 
<a href="#" onClick="return showHide();" >link</a> 
<div id="showHideDiv" style="display:none;">hello!</div>

來源

2013-02-01 Ljubo Valevski

你沒有給我任何代碼的工作，所以你必須修改這個根據自己的需要：

$(document).click(function() { 
    if(this != $("#the_div")[0]) { 
     $("#the_div").hide(); 
    } 
});

，將隱藏在div如果用戶點擊任意位置上不是那個div的頁面。

來源

2013-02-01 18:28:15

抱歉，剛添加的代碼 –

應該是右括號「）」以使得端。 – user460114

@ user460114好的。謝謝。 –

這是我寫的一個快速入侵。我不確定爲什麼要通過點擊文檔上的任何位置來執行相同的操作。如果你想這樣做，用jQuery（document）替換jQuery（'＃link'）。

<html> 
     <head> 
      <script type="text/javascript"> 
       $(document).ready(function(){ 
        jQuery('#link').click(function(){ 
         if(jQuery('#showHideDiv').hasClass('hide')) { 
          jQuery('#showHideDiv').removeClass('hide'); 
          jQuery('#link').css('color', 'red'); 
         } else { 
          jQuery('#showHideDiv').addClass('hide'); 
          jQuery('#link').css('color', 'blue'); 
         } 
        });    
       }); 
      </script> 
     </head> 
     <body> 
      <a href="#" id="link" >link</a> 
      <div id="showHideDiv" class="hide">hello!</div>  
     </body> 
    </html>

這是鏈接到的jsfiddle

http://jsfiddle.net/EUScV/9/

，並添加CSS規則

.hide { 
     display:none; 
    }

來源

2013-02-01 19:15:47 theshadowmonkey

使用香草的JavaScript ...

你需要註冊一個不是您的showHideDiv的元素的onclick處理程序。

function showHide() { 
    ... 
} 

// showHide onclick everywhere 
document.onclick = showHide;

要更改鏈接的CSS，只需將一個ID分配給您的錨標記並註冊一個新的onclick。

<a id="myLink" href="...">link</a> 

document.getElementById("myLink").onclick = function() { 
    // show hide code 
}

但我寧願這樣做jQuery的方式就像在Elliot的答案。

來源

2013-02-01 19:16:04 Jasen

HTML：

<div id="settings"> 
<input/><select></select><span>text</span> 
</div>

使用Javascript：

var settings = document.getElementById('settings'); 

document.onclick = function(e){ 

    var target = (e && e.target) || (event && event.srcElement); 
    var display = 'none'; 

    while (target.parentNode) { 

     if (target == settings) { 
      display ='block'; 
      break; 
     } 
     target = target.parentNode; 
    } 

settings.style.display = display; 

}

來源

2014-03-05 15:47:52

當外部點擊時隱藏div

回答

相關問題