无法切换div

时间:2014-06-21 14:26:30

标签: javascript jquery asp.net

我正在使用jQuery和ASP.Net开展项目。我想要做的是创建一个使用jQuery隐藏/显示div的按钮。这是我使用的代码:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head runat="server">
        <title> Gestion des projets et des demandes </title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" >
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.minimize_button').click(function () {
                    $('#my_div_example').stop().toggle('slow');
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type="submit" value="_" class="minimize_button"  />
            <div class="big_div_content" id="my_div_example"></div>
        </form>
</body>
</html>

似乎行不通,我做错了什么?

2 个答案:

答案 0 :(得分:1)

检查此工作小提琴fiddle

你点击提交时做了事件,所以提交表格,你可以使用div。或者点击提交按钮使用阻止提交。

 <form id="form1" runat="server">
     <div class="minimize_button">clickme</div>
          <div class="big_div_content" id="my_div_example">
               This is toggling
           </div>
 </form>

答案 1 :(得分:0)

首先,

XML在那里做什么?

<?xml version="1.0" encoding="utf-8"?>

其次,你不会发现任何变化

 $('#my_div_example').stop().toggle('slow');

因为div没有内容。它是你看不见的。所以,你的想法是将一些内容包含在div中

<div class="big_div_content" id="my_div_example">
   Some text...
</div>