Question

这就是我创建输入值的文本输入字段的方法，现在我的要求是当用户点击注册患者时切换文本字段，如果他成功注册则自动关闭

<li id="menutog" >
  <a  href="#"  onclick = ""><span class="fa-stack"><i class="fa fa-plus fa-stack-1x"></i><i class="fa fa-user"></i></span>Register Patient</a>
             <im:form id="togform" theme="simple" method="post"><br/>
               <!--  <div class="navbar-default navbar-static-side" role="navigation">
                        <div class="row">
                       <div class="sidebar-collapse">-->
                            <div class="panel panel-default">
                               <div class="panel-heading">
                                <h3 class="panel-title" align="center">Patient Details</h3>
                               </div>
                        <div class="panel-body">
                         <form role="form"> 
                         <fieldset>
           <div class="form-group" align="center">
                    <im:textfield name="registration.firstname" id="firstName" cssClass="form-control" placeholder="First name" tooltip="Enter your First Name" tooltipCssClass="tooltip-arrow"/>
           </div>
            <div class="form-group" id="indOrFamTrId2">
                 <im:textfield name="registration.middlename" id="middleName" cssClass="form-control" placeholder="middle name" />
            </div>
            <div class="form-group" id="indOrFamTrId3">
                 <im:textfield name="registration.lastname" id="lastName" cssClass="form-control" placeholder="Last name"/>
            </div>
            <div class="form-group" id="indOrFamTrId3">
                 <im:textfield name="registration.phoneNumber" id="phoneNumber" cssClass="form-control" placeholder="Phone Number"/>
            </div>
             <div class="form-group" id="indOrFamTrId3">
                 <im:textfield name="registration.emailId" id="emailId" cssClass="form-control" placeholder="Email Adress"/>
            </div>
            <div class="form-group" id="indOrFamTrId3">
                 <im:textfield name="registration.dateofbirth" id="dateofbirth" cssClass="form-control" placeholder="Date of Birth"/>
            </div>
             <div class="form-group" id="indOrFamTrId3">
                 <im:textfield name="registration.Aadhar" id="Aadhar" cssClass="form-control"                 
          placeholder="Aadhar Number"/>
            </div>
            <div class="form-group" id="indOrFamTrId4">
                 <im:textfield name="registration.dateofregistration" id="dateofregistration" cssClass="form-control" placeholder="Date of Registration"/>

            </div>
             <div class="form-group" id="indOrFamTrId5">
                 <im:textfield name="registration.referencedoctor" id="referencedoctor" cssClass="form-control" placeholder="Reference Doctor"/>

            </div>
            <div class="form-group" id="indOrFamTrId6">
                 <im:textfield name="registration.remarks" id="remarks" cssClass="form-control" placeholder="Remarks"/>
            </div>
                </fieldset>    
                          </form>
                            </div>

                            </div> 
                       <table align="center">
                           <tr> 
                              <td> 
                                    <input type="button" value="Register" onclick="registration();" class="btn btn-success btn-lg"/>
                             </td>
                        </tr>
                      </table>

               </im:form>         
</li>

Answer 1

只需$('idoffieldcontainer').hide()或.toggle()

Answer 2

在每个.form-group div上方添加切换按钮

<input type="button" class="toggleBtn" value="Toggle"/>

页面加载时隐藏所有表单组并将侦听器添加到切换按钮以切换div

$(document).ready(function() {
    $('.form-group').hide();
    $('.toggleBtn').click(function() {
        $(this).next('.form-group').toggle();
    });
});

创建jsfiddle

使用jquery创建切换器

2 个答案: