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

应该这样做。记得加上＆＃34; fade＆＃34; class（从bootstrap）到你想要显示（或隐藏）的面板。它的作用是它应用不透明度：0以便隐藏您的元素，但保持其尺寸。（如果你不想保留尺寸，请使用类＆＃34;隐藏＆＃34;代替）。尽量避免使用fadeOut或fadeIn jQuery方法。使用CSS类，它更快/更清洁。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

.hidden { 显示：无; }

添加将它添加到PanelRegisterForm initialy，然后当您希望该面板可见时，简单使用：

$（＆＃39;＃PanelRegisterForm＆＃39）。removeClass（＆＃39;隐藏＆＃39）

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

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

2 个答案: