Question

首先，我有点尴尬地询问这个问题，所以很多人已经问过这个问题，但即使经过这么多帖子，我也无法实现我想要的。基本上，最初隐藏的div必须在按钮单击时显示。

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

代码：

<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而不是使用hide()然后使用show()或toggle()，那么同样如此。

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

任何人都可以告诉我哪里出错了。刚刚开始学习jQuery，当一些看似简单的东西无效时，真的很令人沮丧。

提前致谢。：）

Answer 1

由于您使用button类型的按钮作为asp:Button在浏览器中呈现type="submit"，因此请使用return false;作为

$(document).ready(function () {
        $('#one').hide();
        $('#Button1').click(function () {
            $('#one').toggle(500);
            return false;
        });         
    });

Answer 2

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

$(document).ready(function () {
    $('#one').hide();
    $('#Button1').click(function(e) {
        e.preventDefault();
        $('#one').toggle(500);
    });         
});

jquery显示隐藏的div

2 个答案: