如何在点击页面上的任何位置时隐藏切换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"); 
    }); 
});