如何在使用jQuery单击按钮后显示元素？

Question

我何时在用户单击按钮时显示面板，默认情况下我在属性中设置面板visibility = false ，因此当用户单击该按钮时，该按钮应该隐藏，并且该面板应该显示。 我怎样才能使用jQuery实现这一目标？

我尝试了以下方法：

 $(document).ready(function () { //$('#PanelRegisterForm').hide(); $('#btnRegister').click(function () { $('#btnRegister').fadeOut("slow", function(){ //$('#PanelRegisterForm').attr("visibility","visible"); //$('#PanelRegisterForm').fadeIn("slow"); //$('#PanelRegisterForm').show(); $('#PanelRegisterForm').css("visibility", "visible"); }); }) }); 

 <div class="container container-max-width"> <div class="row"> <div class="panel "> <div class="" style="text-align:center;padding-top:50px;"> <button type="button" class="btn btn-info btn-md" id="btnRegister" >Register</button> </div> <asp:Panel ID="PanelRegisterForm" class="panel-body" runat="server" Visible="False"> <div class="form-group"> <h2 style="text-align: center;">Register</h2> </div> <div class="form-group"> <label class="control-label " for="txtCompanyName">Company Name *</label> <asp:TextBox ID="txtCompanyName" runat="server" class="form-control required-input"></asp:TextBox> </div> <div class="form-group"> <label class="control-label" for="txtCRno">CR Number *</label> <asp:TextBox ID="txtCRno" runat="server" class="form-control required-input"></asp:TextBox> </div> <div class="form-group"> <label class="control-label" for="txtContactPersonName">Contact Person Name</label> <asp:TextBox ID="txtContactPersonName" runat="server" class="form-control"></asp:TextBox> </div> <div class="form-group"> <label class="control-label" for="txtMobileNumber">Mobile Number *</label> <asp:TextBox ID="txtMobileNumber" runat="server" class="form-control "></asp:TextBox> </div> <div class="form-group"> <label class="control-label" for="txtOfficeTel1">Office Telephone No 1</label> <asp:TextBox ID="txtOfficeTel1" runat="server" class="form-control required-input"></asp:TextBox> </div> <div class="form-group"> <label class="control-label" for="txtOfficeTel2">Office Telephone No 2</label> <asp:TextBox ID="txtOfficeTel2" runat="server" class="form-control "></asp:TextBox> </div> <div class="form-group"> <label class="control-label" for="txtDomain">Domain</label> <asp:TextBox ID="txtDomain" runat="server" class="form-control"></asp:TextBox> </div> <div class="form-group"> <label class="control-label" for="txtLocation">Location</label> <asp:TextBox ID="txtLocation" runat="server" class="form-control" TextMode="MultiLine" Height="150px"></asp:TextBox> </div> <div class="form-group"> <label class="control-label" for="txtPostBox">Post Box</label> <asp:TextBox ID="txtPostBox" runat="server" class="form-control"></asp:TextBox> </div> <div class="form-group"> <label class="control-label" for="txtZipCode">Zip Code</label> <asp:TextBox ID="txtZipCode" runat="server" class="form-control"></asp:TextBox> </div> <div class="form-group"> <asp:Button ID="btnRegisterSubmit" runat="server" class="btn btn-info btn-block" Text="Register"/> </div> <p class="form-group">By creating an account, you agree to our <a class="link-hover" href="#">Terms of Use</a> and our <a class="link-hover" href="#">Privacy Policy</a>.</p> <hr /> <p> Already have an account? <a class="link-hover" href="http://sso.godaddy.com/?app=email&realm=pass">Sign in</a> </p> </asp:Panel> </div> </div> </div> 

起初我尝试使用jquery来隐藏面板，如$('#PanelRegisterForm').hide(); 。 但是当页面加载时它会闪烁。 所以我设置visiblity是假的。

当我单击按钮时，它会成功淡出，但Panel不可见。

谢谢

Answer 1

应该这样做。 请记住将“淡入淡出”类（从引导程序）添加到要显示（或隐藏）的面板。 它的作用是应用不透明度：0，以便隐藏元素，但保持其尺寸。 （如果您不想保留尺寸，请使用“隐藏”类）。 尽量避免使用fadeOut或fadeIn jQuery方法。 使用CSS类，它更快/更清洁。

 $(document).ready(function() { $('#btnRegister').click(function() { $(this).fadeOut("slow"); $('#PanelRegisterForm').toggleClass("in"); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container"> <div id="PanelRegisterForm" class="fade"> <div class="form-group"> <input class="form-control" placeholder="name" /> </div> <div class="form-group"> <input class="form-control" placeholder="lastname" /> </div> </div> <button class="btn btn-primary" id="btnRegister">Button</button> </div> 

Answer 2

我不确定ASP.NET是否像Prado （Prado是基于ASP.NET的想法而构建的）。 如果它们相同，这里是我的建议/问题：当你设置Visible = False时，你能检查Panel发生了什么，HTML是否出现在页面的html源代码中？

1. 如果它没有出现/存在（就像Prado那样）那么你的jQuery代码是没用的，你必须使用CSS解决方案（参见下面的2.）。
2. 另一种解决方案是使用CSS来隐藏/显示元素：您可以创建一个类似隐藏的CSS类：

.hidden {display：none; }

添加添加到PanelRegisterForm initialy，然后当你想要该面板可见时，简单使用：

$（ '＃PanelRegisterForm'）。removeClass（ '隐藏'）

这将不会闪烁，因为CSS非常快。