jquery 向下滑动 - 向上滑动 - 第一次默认隐藏，答案

【问题标题】：jquery to slide down - up the form- hidden by default for the first time,jquery 向下滑动 - 向上滑动 - 第一次默认隐藏，
【发布时间】：2012-03-24 17:37:03
【问题描述】：

<div><input type="button" id="changePwd" value="Change your password"/></div>
<br/>
<div id="form_pwd">          
    <form method="POST" action="google.com" id="pwdChange">
        <table>
            <tr>
                <td width="175px"><label for="oldPwd">Enter your password</label></td>                
                <td><input type="password" name="newPwd" id="newPwd" size="35"/></td>
            </tr>
            <tr>
                <td><label for="oldPwd_>"Re-enter your password</label></td>
                <td><input type="password" name="newPwd_" id="newPwd_" size="35"/></td>
            </tr>
    <tr>
        <td></td><td><input type="submit" value="Save Password" /></td>
    </tr>
        </table><br/>

    </form>
</div>

<script>
$("#changePwd" ).click(function () 
{
    if ($("#form_pwd").is(":show")) 
    {
    $("#form_pwd").slideDown("normal");
    }
    else
    {
    $("#form_pwd").hide();
    }
});

</script>

我希望在用户单击按钮之前不显示表单，但我无法使其工作，默认情况下它会在页面显示时显示。谢谢

【问题讨论】：

标签： php javascript jquery html forms

【解决方案1】：

什么是:show???我猜你的意思是:visible...

使用这个...

$("#changePwd").click(function() {
    if (!$("#form_pwd").is(":visible")) {
        $("#form_pwd").slideDown("normal");
    }
    else {
        $("#form_pwd").hide();
    }
});

demo

【讨论】：

无论如何它不能为你工作，因为它处于点击绑定中！所以你需要点击隐藏。看看你的代码。
那么应该打电话给$("#form_pwd").hide();... ;)
是的，看看我下面的回答。

【解决方案2】：

试试这个。

<script type="text/javascript">
$("#form_pwd" ).hide();
$('#changePwd').click(function() {
  $('#form_pwd').slideToggle('slow', function() {
  });
});
</script>

$("#form_pwd" ).hide();将在页面加载时隐藏您的表单，并且仅在您单击更改密码按钮后才会显示。

【讨论】：

【解决方案3】：

或者你可以这样做：

$("#form_pwd" ).hide();

【讨论】：

【解决方案4】：

将 display:none 添加到您的 div 中

<div id="form_pwd" style="display:none;">

【讨论】：

【解决方案5】：

只需使用 CSS 即可完成此操作

<div id="form_pwd" style="display:none;">

这将隐藏您的 div 元素，直到发生 click 事件，此时 jquery 将向下滑动元素并自动为您删除 display none

【讨论】：

这纯粹是不可取的... javascript被禁用，您将看不到表单，因此无用... IMO...
只需使用#form_pwd{display:none} .no-js #form_pwd{display:block;}，当然还要添加从html中删除.no-js的脚本。