1

.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をクリックすると、toggledivが表示されます。

しかし、私は、ページのどこかをクリックするときにトグル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をクリックすると、toogledivが表示および非表示になります。

4

3 に答える 3

3

ドキュメントへのイベントのバブリングを停止する必要があります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);
      }
   });
});
于 2013-02-09T10:29:20.153 に答える
0

ホットフィックスとして、ターゲット要素が非表示にする要素ではないことを確認します。

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

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

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

    ...

});
于 2013-02-09T10:19:22.790 に答える
0

これを試して。「showSr​​eachDiv」をクリックしたら、イベントの伝播を停止する必要があります

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

    $(document).click(function(){
        $(".Search").toggle("slow");
    });
});
于 2013-02-09T10:43:49.843 に答える