點擊外面時隱藏div

Question

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

<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>

Answer 1

你沒有給我任何代碼可以使用，所以你必須修改它以滿足你的需要：

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

如果用戶點擊頁面上不是該div的任何地方，那將隱藏div。

Answer 2

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;

}

Answer 3

這是我寫的快速黑客。 我不確定您為什么要通過單擊文檔上的任何位置來執行相同的活動。 如果你想這樣做，用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;
    }

點擊外面時隱藏div

問題描述

3 個解決方案

解決方案1
5 2013-02-01 18:28:15

解決方案2
2 2014-03-05 15:47:52

解決方案3
1 2013-02-01 19:15:47

點擊外面時隱藏div

問題描述

3 個解決方案

解決方案1 5 2013-02-01 18:28:15

解決方案2 2 2014-03-05 15:47:52

解決方案3 1 2013-02-01 19:15:47

解決方案1
5 2013-02-01 18:28:15

解決方案2
2 2014-03-05 15:47:52

解決方案3
1 2013-02-01 19:15:47