0

ページでトグル 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 でコントロールをクリックすると、非表示になります。

テキストボックスにテキストを挿入したいのですが、そうではありません。

4

3 に答える 3

0

document.clickクリックされた要素が検索の子であるかどうかを確認しDIV、その場合はクリックハンドラーをキャンセルできます。

$(document).click(function (evt) {
    if ($(evt.target).parents('.Search').length > 0) return;
    // put original code here ...
});
于 2013-02-18T10:33:11.673 に答える
0

この例を試してください:

<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>
于 2013-02-18T10:11:44.187 に答える