Question

我刚刚学习了javascript并且我有一个表单而且我刚刚使用javascript创建了函数，因为我想在我的页面中创建一个隐藏/显示表单，我的问题是，如何设置我的当我在浏览器中加载页面时，表单变为隐藏表单，因为当我加载页面时，表单显示....

这是我的js代码

<script type="text/javascript">
$(function () {
    $('.showhide').click(function () {
        $(".slidediv").slideToggle();
    });
});

这是我的HTML

<form id="form1" class="bs-example form-horizontal" runat="server">
<a href="#" class="showhide" shape="circle" style="border: thin solid #000000">Show / Hide</a>   
<div class="slidediv"> 
        <fieldset>
            <legend></legend>
            <div id="divcontrol">
                <div class="form-group">
                    <label for="lblUserId" class="col-lg-2 control-label">Name</label>
                        <div class="col-lg-10">
                            <asp:TextBox ID="txtName" CssClass="form-control" runat="server"></asp:TextBox>                  
                        </div>
                </div>

                <div class="form-group">
                    <label for="lblUserDivision" class="col-lg-2 control-label">Division</label>
                        <div class="col-lg-10">                                
                              <asp:TextBox ID="txtDivision" CssClass="form-control" runat="server"></asp:TextBox>                        
                                </div>
                </div>

                <div class="form-group">
                    <label for="lblUserRole" class="col-lg-2 control-label">Message</label>
                        <div class="col-lg-10">
                            <asp:TextBox ID="txtMessage" TextMode="MultiLine" Columns="50" Rows="5" CssClass="form-control" runat="server" ></asp:TextBox>
                        </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-10 col-lg-offset-2">
                    <asp:Button ID="btnSave" CssClass="btn btn-primary" Text="Submit" runat="server" />
                                              <asp:Button ID="btnCancel" CssClass="btn btn-primary" Text="Cancel" 
                            runat="server" />
                    </div>
                </div>
                </div>
        </fieldset>
    </div>
      </form>

Answer 1

查看this主题。您可以为表单设置display:none;规则。

Answer 2

试试这个

$("#form1").hide();
$("#toggleShow").click(function(){
  $("#form1").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="Show/Hide Form" id="toggleShow" />

<form id="form1" class="bs-example form-horizontal" runat="server">  
<div class="slidediv"> 
        <fieldset>
            <legend></legend>
            <div id="divcontrol">
                <div class="form-group">
                    <label for="lblUserId" class="col-lg-2 control-label">Name</label>
                        <div class="col-lg-10">
                            <asp:TextBox ID="txtName" CssClass="form-control" runat="server"></asp:TextBox>                  
                        </div>
                </div>

                <div class="form-group">
                    <label for="lblUserDivision" class="col-lg-2 control-label">Division</label>
                        <div class="col-lg-10">                                
                              <asp:TextBox ID="txtDivision" CssClass="form-control" runat="server"></asp:TextBox>                        
                                </div>
                </div>

                <div class="form-group">
                    <label for="lblUserRole" class="col-lg-2 control-label">Message</label>
                        <div class="col-lg-10">
                            <asp:TextBox ID="txtMessage" TextMode="MultiLine" Columns="50" Rows="5" CssClass="form-control" runat="server" ></asp:TextBox>
                        </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-10 col-lg-offset-2">
                    <asp:Button ID="btnSave" CssClass="btn btn-primary" Text="Submit" runat="server" />
                                              <asp:Button ID="btnCancel" CssClass="btn btn-primary" Text="Cancel" 
                            runat="server" />
                    </div>
                </div>
                </div>
        </fieldset>
    </div>
      </form>

加载页面时如何设置我的表单隐藏

2 个答案: