jquery - 单击页面上的任意位置时如何隐藏切换 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。

但我想，在单击页面上的任意位置时隐藏切换 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);
             }

         });
     });

但是当我单击我的 div 时，它会显示和隐藏togle div。

Answer 1

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

结帐小提琴

$(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");
    });
});