JavaScript/HTML隐藏的表单元素显示不正确

Question

我正在创建一个带有输入字段的基本表单。其中一个字段使用复选框。选中时，我希望表单在下面再显示两个输入字段，并与之前的字段对齐（从复选框后面的行开始）。现在，我的代码是有隐藏字段显示在该行的末尾，而不是下一个：

HTML：

<form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left"> 
     <div class="form-group"> 
     <label class="control-label col-md-3 col-sm-3 col-xs-12">Outgoing SMTP Server 
     </label> 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
      <input type="text" id="outgoing_sever" required="required" class="form-control col-md-7 col-xs-12"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-md-3 col-sm-3 col-xs-12">Port 
     </label> 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
      <input type="text" id="port" required="required" class="form-control col-md-7 col-xs-12"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-md-3 col-sm-3 col-xs-12">Enable Authentication 
     </label> 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
      <input type="checkbox" id="enable_auth" name="question">Enable SMTP Authentication 
     </div> 
     <div id="hidden_fields"> 
      <div class="form-group"> 
       <label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Login 
       </label> 
       <div class="col-md-6 col-sm-6 col-xs-12"> 
        <input type="text" id="server_login" name="hidden" required="required" class="form-control col-md-7 col-xs-12"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Passowrd 
       </label> 
       <div class="col-md-6 col-sm-6 col-xs-12"> 
        <input type="text" id="server_password" name="hidden" required="required" class="form-control col-md-7 col-xs-12"> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3"> 
      <button type="submit" class="btn btn-success">Update</button> 
      <button class="btn btn-primary">Reset</button> 
     </div> 
    </div> 
</form> 

的Javascript：

$(function() { 
    var checkbox = $("#enable_auth"); 
    var hidden = $("#hidden_fields"); 

    hidden.hide(); 

    checkbox.change(function() { 
     if (checkbox.is(':checked')) { 
      hidden.show(); 
     } else { 
      hidden.hide(); 
     } 
    }); 
}); 

有谁知道这是什么原因造成的？谢谢！

Answer 1

Working Fiddle。

我希望窗体在下面再显示两个输入字段，与之前的对齐。所以，你必须把hidden_fields DIV之前checkbox场，所以重新排序的div像：

<form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left"> 
    <div class="form-group"> 
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Outgoing SMTP Server 
    </label> 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
     <input type="text" id="outgoing_sever" required="required" class="form-control col-md-7 col-xs-12"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Port 
    </label> 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
     <input type="text" id="port" required="required" class="form-control col-md-7 col-xs-12"> 
    </div> 
    </div> 

    <div id="hidden_fields"> 
    <div class="form-group"> 
     <label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Login 
     </label> 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
     <input type="text" id="server_login" name="hidden" required="required" class="form-control col-md-7 col-xs-12"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Passowrd 
     </label> 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
     <input type="text" id="server_password" name="hidden" required="required" class="form-control col-md-7 col-xs-12"> 
     </div> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Enable Authentication 
    </label> 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
     <input type="checkbox" id="enable_auth" name="question">Enable SMTP Authentication 
    </div> 

    </div> 

    <div class="form-group"> 
    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3"> 
     <button type="submit" class="btn btn-success">Update</button> 
     <button class="btn btn-primary">Reset</button> 
    </div> 
    </div> 
</form> 

希望这有助于。