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

Question

实现如下:

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

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

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

我该怎么做？

谢谢

Answer 1

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

使 input# css 属性更具体，在选择器前面加上父 id:

查看 JSFiddle 上的解决方案:http://jsfiddle.net/Chandu/AdQfB/8/IE。:改变风格:

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 方法(注册按钮点击事件)中应用 display:block 的 css 样式如下(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();    
    });