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

2019年7月20日 94次阅读

我何时在用户单击按钮时显示面板,默认情况下我在属性中设置面板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不可见.

谢谢

最佳答案 应该这样做.请记住将“淡入淡出”类(从引导程序)添加到要显示(或隐藏)的面板.它的作用是应用不透明度：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>
点赞