javascript - 在切换 div 中单击控件时隐藏切换 div

Question

我在页面中使用切换 div。我有一个文本框和一个下拉列表。

 <div class="Search" style="display: none" >
  <table width="100%" style="border: 1px solid #fff; border-radius:5px;padding:15px">
   <tr>
    <td width="60px">دسته بندی</td>
    <td>
     <asp:DropDownList ID="CategoryDropDownList" runat="server" />
    </td>
   </tr>
   <tr>
    <td>کلمه کلیدی</td>
    <td>
     <asp:TextBox ID="SearchTextBox" runat="server" Width="95%" />
    </td>
    <td><asp:ImageButton runat="server" ID="SerachButton"  ImageUrl="~/images/btnSearchIcon.png" OnClick="SerachButton_Click"  ValidationGroup="Search" /></td>
    </tr>
  </table>
 </div>

单击页面上的任何位置时，我将其隐藏。

<script type="text/javascript">
     $(document).ready(function () {
         $('#showSreachDiv').click(function (evt) {
             $(".Search").toggle("slow");
             evt.stopPropagation();
         });

         $(document).click(function () {
             var $el = $(".Search");

             // toggle div
             if ($el.is(":visible")) {
                 // fade out
                 $(".Search").toggle("slow");
             }
         });
     });

</script>

但是当我在切换 div 中单击控件时，将其隐藏。

我想在文本框中插入文本，但不这样做。

Answer 1

试试这个例子：

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#showSreachDiv').toggle(function (evt) {
         $(".Search").toggle("slow");
     }, function(evt){
         $(".Search").toggle("slow");
     }
    );
});
</script>
<a href="#" id="showSreachDiv">Toggle</a>
<div class="search" style="border:solid 2px #CCC;display:none;">
<h1>//Your Work Here...</h1>
</div>

Answer 2

您可以检查document.click单击的元素是否是搜索的子元素DIV，在这种情况下，取消单击处理程序：

$(document).click(function (evt) {
    if ($(evt.target).parents('.Search').length > 0) return;
    // put original code here ...
});

Answer 3

尝试这个：

$(document).ready(function () {
    $('#showSreachDiv').toggle(function (evt) {
         $(".Search").fadeout("slow");
     }, function(evt){
         $(".Search").fadein("slow");
     }
    );
}