0

首先，我有点不好意思问这个问题，很多人已经问过这个问题了，但是即使经历了这么多帖子，我也无法实现我想要的。基本上，最初隐藏的 div 必须在单击按钮时显示。

我尝试使用display:noneand隐藏 div hide()，然后使用show(),toggle()和css("display","block"). 使用上述各种组合，我仍然无法得到结果。

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />
<script src="jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQuery/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#one').hide();
        $('#Button1').click(function () {
            $('#one').toggle(500);
        });         
    });
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="one" style="height: 20px;width:200px; background-color: Red; ">       
</div>
<asp:Button ID="Button1" runat="server" Text="Show" />
</form>
</body>
</html>

单击按钮时，div 会显示一秒钟，然后再次消失。

如果我在上面的代码中使用show()而不是，也会发生同样的事情。toggle()

style="display:none"如果我设置为 div 而不是 usinghide()然后使用show()or ，同样的事情toggle()。

我也尝试过使用$('#one').css("display","block");但同样的结果。

谁能告诉我哪里出错了。刚开始学习 jQuery，当一些看似如此简单的东西不起作用时，这真的很令人沮丧。

提前致谢。:)

4

2 回答 2

2

由于您使用的按钮类型与浏览器中呈现的类型button 相同，因此请用作asp:Buttontype="submit"return false;

$(document).ready(function () {
        $('#one').hide();
        $('#Button1').click(function () {
            $('#one').toggle(500);
            return false;
        });         
    });
于 2012-12-07T11:12:47.653 回答
1

您正在提交表单并重新加载页面，按钮元素的默认类型是submit，您可以尝试使用preventDefault事件对象的方法或将按钮的 type 属性设置为button。

$(document).ready(function () {
    $('#one').hide();
    $('#Button1').click(function(e) {
        e.preventDefault();
        $('#one').toggle(500);
    });         
});
于 2012-12-07T11:06:47.843 回答