如何在點擊頁面上的任何位置時隱藏切換div？

Question

我隱藏與.toggle（）

<div style="position: absolute; top: 0; right: 250px;z-index:7"> 
    <div class="Search" style="display: none;" > 
    <table width="100%" style="border: 1px solid #fff; border-radius:5px;padding:15px"> 
     <tr> 
     <td> 
     <asp:DropDownList ID="CategoryDropDownList" runat="server" /> 
     </td> 
     </tr> 
     </table> 
    </div> 
    <div id="showSreachDiv"> 
    <a style="cursor: pointer"> 
    <img src="images/btnSearch.png" /></a> 
    </div> 
</div> 

/顯示元素與jQuery

$(document).ready(function() { 
     $("#showSreachDiv").click(function() { $(".Search").toggle("slow"); }); 
    }); 

當我點擊我的DIV，顯示切換股利。

但我想要的，當點擊頁面上的任何位置時隱藏切換div。

我使用此代碼

$(function() { 

     // body click 
     $("body").click(function() { 

      // element to toggle 
      var $el = $(".Search"); 

      // toggle div 
      if ($el.is(":visible")) { 
       // fade out 
       $el.fadeOut(200); 
      } else { 
       // fade in 
       $el.fadeIn(200); 
      } 

     }); 
    }); 

但它顯示和隱藏的toogle DIV當我點擊我的股利。

Answer 1

您必須停止事件冒泡到文檔e.stopPropagation()：

chekout fiddle

$(document).ready(function() { 
    $("#showSreachDiv").click(function (e) { //<--------pass here 
     e.stopPropagation(); // <--------------stop here 
     $(".Search").toggle("slow"); 
    }); 
    $(document).click(function() { // you don't need the else part to fadeout 
     var $el = $(".Search"); 
     if ($el.is(":visible")) { 
      $el.fadeOut(200); 
     } 
    }); 
}); 

Answer 2

作爲一個修補程序，檢查目標元素是不是你要隱藏的元素：

$("body").click(function (event) { 

    // element to toggle 
    var $el = $(".Search"); 

    if(event.target == $el[0]) 
     return; 

    ... 

}); 

Answer 3

試試這個。你需要停下一次點擊「showSr​​eachDiv」

$(document).ready(function() { 
    $('#showSreachDiv').click(function(evt) { 
     $(".Search").toggle("slow"); 
     evt.stopPropagation(); 
    }); 

    $(document).click(function(){ 
     $(".Search").toggle("slow"); 
    }); 
});