Question

以下是实施：

http://jsfiddle.net/AdQfB/2/

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

我希望此页面在第一次加载时显示两个字段的视图（而不是第一次加载时显示的当前5），然后当用户单击“注册”链接时，它会显示另一个3 - 总共5个。

我该怎么做？

由于

Answer 1

加载网站时必须隐藏它们。

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

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

Answer 2

您正在为sign_in div块中的输入元素分配显示块，我认为这优先于输入#css of display：none。

使输入#css属性更具体，为选择器添加父ID：

检查JSFiddle上的解决方案：http://jsfiddle.net/Chandu/AdQfB/8/ 即：改变风格：

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

到

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

编辑：更新了解决方案以使用更好的解决方案。

同样在slideDown方法（注册按钮点击事件）中应用css样式的display：block，如下所示（JSFiddle URL：http://jsfiddle.net/Chandu/AdQfB/11/）：

$("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();    
    });

Answer 3

尝试

$(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>

Answer 4

您可以在页面加载后模拟“登录”点击，只需在结尾添加：$("input#login").click();。

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

4 个答案: