如何在单击页面的任何位置时隐藏toggle div ?

I Hide/Show elements with .toggle()

我用.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>

with jquery

与jquery

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

When i click my div, show toggle div.

当我点击我的div, show toggle div。

But i want, hide toggle div when clicking anywhere on the page.

但我想，在点击页面的任何地方时，隐藏toggle div。

I use this code

我用这段代码

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

         });
     });

But it show and hide toogle div when i click my div.

但是当我点击我的div时，它会显示并隐藏toogle div。

3 个解决方案

#1

You have to stop the event bubbling to the document e.stopPropagation():

您必须停止事件冒泡到文档。stoppropagation ():

chekout fiddle

chekout小提琴

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

#2

As an hotfix, check that the target element is not the element you want to hide:

作为一个热修复，检查目标元素不是您想要隐藏的元素:

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

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

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

    ...

});

#3

Try this. You need to stop event propagation once clicked on 'showSreachDiv'

试试这个。您需要停止事件传播，一旦点击“showsarediv”

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

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

#1