Javascript 如何在单击链接时显示表单字段？

这是我的表单页面，我想将此表单隐藏在名为“更改密码”的链接或按钮下。一旦用户单击它，它必须显示此表单。任何帮助都将不胜感激

           <form action="#buildurl('user.change_password')#" method="post">
                <input type="hidden" name="email" id="email" value="#session.auth.email#">

                <div class="control-group">
                    <label class="label-control" for="password">Enter current password</label>
                    <div class="controls">
                         <input type="password" name="password" id="password" >
                    </div>
                </div>

                <div class="control-group">
                    <label class="label-control" for="password_new">Enter New password</label>
                    <div class="controls">
                         <input type="password" name="password_new" id="password_new" >
                    </div>
                 </div>                 

                <div class="control-group">
                    <label class="label-control" for="password_confirm">Enter confirm password</label>
                    <div class="controls">
                         <input type="password" name="password_confirm" id="password_confirm" >
                    </div>
                 </div>

                <div>
                    <button type="submit" name="submit_password" id="submit_password" class="btn btn-primary">Submit</button>
                </div>
             </form>

输入当前密码
输入新密码
输入确认密码
提交

您想要这样做吗：，如果它是隐藏的，它将被显示，否则，它将被隐藏。 我建议将id添加到表单中，并用您的

#id

替换jQuery代码中的

'form'

，以避免在有多个表单时出现问题

JQuery:

<script type='text/javascript'>
 $('form').hide();//hide initially
 $("#showButton").click(function(e){
   $('form ').toggle('slow');//or just show instead of toggle

 });
</script>

$（'form'）.hide（）//最初隐藏
$（“#显示按钮”）。单击（功能（e）{
$（'form'）。切换（'slow'）；//或仅显示而不是切换
});

将jQuery文件添加到html页面的

中的代码中：

<script type='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

---

给出表单和按钮ID。然后：

CSS

JS

---

起初，我不想显示表单字段，我只想在用户单击按钮后显示一个链接或按钮，它应该显示表单字段。这正是我在fiddle中看到的，但在我的系统中没有。我需要一些东西吗？你需要有jquery，还有里面的包装js代码。。。。。。检查我的答案非常感谢你的帮助，我没有包括那个链接，这是它不工作的地方。

#yourForm { display: none; }

$(document).on('click', '#changePassword', function () {
  $('#yourForm').show();
});