0

嗨，我已经用这个代码拉了大约 24 小时的头发。

我想要实现的是一个简单的登录/注册选项，它将在页面上上下滑动，当我点击登录时注册表单可见时，另一个表单将隐藏，反之亦然。

我的代码发生的情况是，每当我单击注册或登录锚点时，锚点就会消失，并且表单只会简单地显示。（）显示它不会跟随命令中的向上或向下滑动，但是当我按下我创建的取消按钮时隐藏表单的事件 .slideUp() 的动画将推动并隐藏表单。每当我有一个可见的表格时，就可以说注册，每当我点击两个表格中的标志时，这两个表格将同时可见。

你能帮我解决这些问题吗？非常感谢！

HTML

<div id="divLinks">
    <div id="divNav">
        <ul>
            <li><a href="index.html">Home</a>
            </li>
            <li><a href="shop.html"> Shop</a>
            </li>
            <li><a href="sell.html">Sell</a>
            </li>
        </ul>
    </div>
    <div id="divNavAccount">
        <ul>
            <li><a href="#" class="show_hide_sign_up">Not a user yet?</a>
            </li>
            <li><a href="#" class="show_hide_sign_in">Sign In</a>
            </li>
        </ul>
    </div>
</div>
<div id="divSignIn" class="show_hide_sign_in">
    <div id="divSignInFields">
        <form>
            <input type="text" name="username" value="username">
            <br />
            <input type="password" name="password" value="password">
            <br />
            <input type="submit" value="Submit">
            <input type="button" value="Cancel" class="hideCancel">
        </form>
    </div>
    <div id="divSignInDescription">
        <ul>
            <li>Username:</li>
            <li>Password:</li>
        </ul>
    </div>
</div>
<div id="divSignUp" class="show_hide_sign_up">
    <div id="divSignUpFields">
        <form>
            <input type="text" name="username" value="username">
            <br />
            <input type="password" name="password" value="password">
            <br />
            <input type="text" name="first name" value="first name">
            <br/>
            <input type="text" name="last name" value="last name">
            <br/>
            <input type="email" name="email" value="user@email.com">
            <br/>
            <input type="submit" value="Submit">
            <input type="button" value="Cancel" class="hideCancel2">
            <br/>
            <input type="reset" value="Reset">
        </form>
    </div>
    <div id="divSignUpDescription">
        <ul>
            <li>Username:</li>
            <li>Password:</li>
            <li>First Name:</li>
            <li>Last Name:</li>
            <li>Email:</li>
        </ul>
    </div>
</div>

CSS 

    .show_hide_sign_in {

    }

    .show_hide_sign_up {

    }

    .div_show_hide_sign_in {

    }

    .div_show_hide_sign_up {

    }

    .hideCancel {

    }

    .hideCancel2 {

    }

血腥的 Jquery

    $(document).ready(function(e) {
    $("#divSignIn").hide();

$('.show_hide_sign_in').click(function(){
    $(".show_hide_sign_in").slideUp().show();
$("#divSignIn").slideUp.show();

/*---hides the sign in form--*/
$("#divSignUp").hide();
/*---hides the sign in form--*/
    });


/*--cancel button--*/
$('.hideCancel').click(function(){
    $("#divSignIn").hide().slideDown();

    });
/*--cancel button--*/
});; 



/*sign up href sliding down*/
$(document).ready(function(e) {
        $("#divSignIn").hide();


$('.show_hide_sign_in').click(function(){
    $(".show_hide_sign_in").slideUp().show();
$("#divSignIn").slideUp.show();

/*---hides the sign in form--*/
$("#divSignUp").hide();
/*---hides the sign in form--*/
    });


/*--cancel button--*/
$('.hideCancel').click(function(){
    $("#divSignIn").hide().slideDown();

    });
/*--cancel button--*/
});; 




/*sign up href sliding down*/
$(document).ready(function(e) {
        $("#divSignUp").hide();


$('.show_hide_sign_up').click(function(){
    $(".show_hide_sign_up").slideUp().show();
$("#divSignUp").slideUp.show();

/*---hides the sign in form--*/
$("#divSignIn").hide();
/*---hides the sign in form--*/
    });


/*--cancel button--*/
$('.hideCancel2').click(function(){
    $("#divSignUp").hide().slideDown();

    });
/*--cancel button--*/
});;     
$(document).ready(function(e) {
        $("#divSignIn").hide();


$('.show_hide_sign_in').click(function(){
    $(".show_hide_sign_in").slideUp().show();
$("#divSignIn").slideUp.show();

/*---hides the sign in form--*/
$("#divSignUp").hide();
/*---hides the sign in form--*/
    });


/*--cancel button--*/
$('.hideCancel').click(function(){
    $("#divSignIn").hide().slideDown();

    });
/*--cancel button--*/
});; 




/*sign up href sliding down*/
$(document).ready(function(e) {
    $("#divSignUp").hide();

$('.show_hide_sign_up').click(function(){
    $(".show_hide_sign_up").slideUp().show();
$("#divSignUp").slideUp.show();

/*---hides the sign in form--*/
$("#divSignIn").hide();
/*---hides the sign in form--*/
    });


/*--cancel button--*/
$('.hideCancel2').click(function(){
    $("#divSignUp").hide().slideDown();

    });
/*--cancel button--*/
});;     
$(document).ready(function(e) {
        $("#divSignIn").hide();

$('.show_hide_sign_in').click(function(){
    $(".show_hide_sign_in").slideUp().show();
$("#divSignIn").slideUp.show();

/*---hides the sign in form--*/
$("#divSignUp").hide();
/*---hides the sign in form--*/
    });


/*--cancel button--*/
$('.hideCancel').click(function(){
    $("#divSignIn").hide().slideDown();

    });
/*--cancel button--*/
});; 



    /*sign up href sliding down*/
    $(document).ready(function(e) {
    $("#divSignUp").hide();

$('.show_hide_sign_up').click(function(){
    $(".show_hide_sign_up").slideUp().show();
$("#divSignUp").slideUp.show();

/*---hides the sign in form--*/
$("#divSignIn").hide();
/*---hides the sign in form--*/
    });


/*--cancel button--*/
$('.hideCancel2').click(function(){
    $("#divSignUp").hide().slideDown();

    });
/*--cancel button--*/
});;     
    $(document).ready(function(e) {
    $("#divSignUp").hide();

$('.show_hide_sign_up').click(function(){
    $(".show_hide_sign_up").slideUp().show();
$("#divSignUp").slideUp.show();

/*---hides the sign in form--*/
$("#divSignIn").hide();
/*---hides the sign in form--*/
    });


/*--cancel button--*/
$('.hideCancel2').click(function(){
    $("#divSignUp").hide().slideDown();

    });
/*--cancel button--*/
});;
4

2 回答 2

0

您需要更改要在滑动完成时调用的 show() 和 hide()。像这样：

    $(".show_hide_sign_up").slideUp(function() { $(this).show() } );
    $(".show_hide_sign_up").slideDown(function() { $(this).hide() } );
于 2013-09-02T18:17:49.397 回答
0

好吧，您的代码中有一些问题我不确定它们的意义是什么，例如：

1) '.slideUp().show();' 和其他类似。2) 为什么您的切换锚点和它们切换的 div 具有相同的名称。

  • 对于第一个问题，我假设您想检查目标 div 是否隐藏或可见，如果是这样，那么您可以使用以下内容：

    if ($("div.show_hide_sign_up").is(':hidden')) {

       $("div.show_hide_sign_up").slideDown(250);

    } 别的 {

        $("div.show_hide_sign_up").slideUp(250);

    }

  • 对于第二个，我建议使用不同的类名以避免您的 html 元素之间的冲突，所以在这里，我认为下面的代码可以解决您的问题

    $(文档).ready(函数 (e) {

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

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

$('a.show_hide_sign_in').click(function () {

    $("#divSignUp").slideUp(100);

    if ($("div.show_hide_sign_in").is(':hidden')) {

        $("div.show_hide_sign_in").slideDown(250);

    } else {

        $("div.show_hide_sign_in").slideUp(250);

    }

});

$('a.show_hide_sign_up').click(function () {

    $("#divSignIn").slideUp(100);

    if ($("div.show_hide_sign_up").is(':hidden')) {

        $("div.show_hide_sign_up").slideDown(250);

    } else {

        $("div.show_hide_sign_up").slideUp(250);

    }

});


$('.hideCancel').click(function () {

    $("#divSignIn").slideUp();

});

$('.hideCancel2').click(function () {

    $("#divSignUp").slideUp();

});

    });

于 2013-09-02T18:56:25.137 回答