Jquery 如何在初始页面加载时只显示两个表单字段而不是全部5个？CSS

以下是实施方案：

如果您注意到，当您在输入任何内容之前单击“登录”或“注册”时，您应该会看到一些字段消失并分别重新出现

我想让这个页面只显示第一次加载时的两个字段的视图（而不是第一次加载时显示的当前5个字段），然后当用户单击“注册”链接时，它显示其他3个字段，总共5个

我该怎么做

---

谢谢

加载站点时，您必须隐藏它们

尝试将以下内容添加到jQuery代码的末尾

$(document).ready(function() {
     $("input#f_name").slideUp().css({"display": "hidden"});
     $("input#l_name").slideUp().css({"display": "hidden"});
     $("input#confirm_pw").slideUp();
});

---

您可以在页面加载后模拟“登录”单击，只需添加：

$（“输入登录”）。单击（）结尾。
您正在为div块中的sign#u中的输入元素分配显示块，我认为这优先于display:none的输入#css

使输入#css属性更具体，在选择器前面加上父id：

检查JSFIDLE上的解决方案：
即。：
更改样式：

input#confirm_pw, input#f_name, input#l_name {
    display: none;
}

到

编辑：更新解决方案以使用更好的修复程序

在slideDown方法（注册按钮单击事件）中也应用css样式的display:block，如下所示（JSFIDLE URL:）：

$（“输入#注册”）。单击（函数（e）{//这是注册表单功能
log（'单击注册按钮！'）；
$（“input#f_name”）.slideDown（）.prepend（“

”）.css（{“display”：“block”}）；
$（“input#l_name”）.slideDown（）.css（{“display”：“block”}）；
$（“input#confirm_pw”）.slideDown（）.css（{“display”：“block”}）；
$（“输入#寄存器”）.val（'Submit'）；
$（“input#login”）.css（{'color'：'#567603'}）；
e、 预防默认值（）；
});
试试看

$（文档）.ready（函数（）{
$（“输入#登录”）。单击（）；
});










我非常喜欢这个解决方案。唯一的问题是，在页面加载时，您会看到字段向上滑动。我怎么能在看不到幻灯片的情况下隐藏它们呢？我试着只做
input#f#u name.css（{“display”：“hidden”}）但这不起作用。想法？这几乎奏效了。唯一的问题是，
display:block
实际上用于布局问题。如果您在JSFIDLE上更改了它并运行了它，您将看到在没有块显示的情况下它看起来是多么奇怪。我不希望布局混乱。这是所有解决方案中最优雅的。谢谢没有什么比一个简单的CSS选择器更改更合适：）实际上……差不多了。当您单击“注册”按钮时，它会进一步破坏布局。快到了，塞伯内特…请把它拿到那里。我真的，真的很喜欢这个解决方案，如果你能得到它的话。请检查？？不太确定这将如何解决问题。哦…我知道你在这里干什么了。加载文档后，您将模拟单击功能。有趣的解决方案。这不是提交一个空表单吗？Mithun P.我试过了，我看到了它的工作原理。我的问题是，他们看到其他字段在页面加载时向上滑动。我希望他们只看到这两个字段到那些“注册”屏幕字段，请参阅
div#sign_in input#confirm_pw, div#sign_in input#f_name, div#sign_in input#l_name {
    display: none;
}

$("input#register").click(function(e) {    //This is for the registration form functionality
        console.log('register button clicked!');
        $("input#f_name").slideDown().prepend("<br /><br />").css({"display": "block"});
        $("input#l_name").slideDown().css({"display": "block"});
        $("input#confirm_pw").slideDown().css({"display": "block"});
        $("input#register").val('Submit');
        $("input#login").css({ 'color' : '#567603' });
        e.preventDefault();    
    });

$(document).ready(function() {
    $("input#login").click();
});


<div id="sign_in">

    <form method="POST">
            <input id="f_name" type="text" value="First Name" required class="clearField curved" style="display:none;"/> <br />
            <input id="l_name" type="text" value="Last Name" required class="clearField curved" style="display:none;"/> <br />
            <input id="email" type="text" value="Email address" required class="clearField curved" /> <br />
            <input id="pw" type="password" value="Password" required class="clearField curved" /><br />    
            <input id="confirm_pw" type="password" value="Password" required class="clearField curved" style="display:none;"/><br />
        <div id="login_buttons">
            <input id="login" type="submit" value="Log in" class="curved"> 
            <input id="register" type="submit" value="Register" class="curved">
        </div>
    </form>

</div>