Javascript 如何在JQUERY中创建简单的上下滑动登录/注册分区_Javascript_Jquery_Html_Css_Forms

Javascript 如何在JQUERY中创建简单的上下滑动登录/注册分区

javascript jquery html css forms

Javascript 如何在JQUERY中创建简单的上下滑动登录/注册分区,javascript,jquery,html,css,forms,Javascript,Jquery,Html,Css,Forms,嗨，我让ben用这个密码把我的头发拔了24小时我想要实现的是一个简单的登录/注册选项，该选项将在页面上下滑动，当我单击登录时，注册表单可见，另一个表单将隐藏，反之亦然我的代码所发生的事情是，每当我单击注册或登录锚定时，锚定就会消失，表单就会简单地显示。（）显示它不会跟随命令中的slideup或down，但当我按下cancel按钮时，.slideup（）的动画将穿透并隐藏表单。每当我看到一个表单，比如说注册，每当我点击这两个表单中的签名，这两个表单就会同时可见你能帮我对付这些家伙吗？多谢各位

嗨，我让ben用这个密码把我的头发拔了24小时

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

我的代码所发生的事情是，每当我单击注册或登录锚定时，锚定就会消失，表单就会简单地显示。（）显示它不会跟随命令中的slideup或down，但当我按下cancel按钮时，.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>

该死的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--*/
});;

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

    $(".show_hide_sign_up").slideUp(function() { $(this).show() } );
    $(".show_hide_sign_up").slideDown(function() { $(this).hide() } );

您的代码中存在一些问题，我不确定它们的意义是什么，比如：

1） “.slideUp（）.show（）；”和其他类似的。 2）为什么您的Toggler锚点和它们的toggled div具有相同的名称

对于第一个问题，我假设您想要检查目标div是隐藏的还是可见的，如果是这样，那么您可以使用如下内容：
如果（$（“div.show\u hide\u sign\u up”）是（'：hidden'））{
}否则{
```
    $("div.show_hide_sign_up").slideUp(250);
```
}
对于第二个问题，我建议使用不同的类名来避免html元素之间的冲突，因此，我认为下面的代码可以解决您的问题
$（文档）.ready（函数（e）{
}))；

你能做一个jsfiddle吗？更容易看到问题空css是怎么回事？请创建一个抱歉的家伙，我希望这是你要找的哦，老兄，非常感谢！！！这解决了我的问题，我一定会研究这个！谢谢，谢谢！我正在进行应用程序开发，他们只讨论了javascript一天，哈哈，谢谢！击掌！这是否仅适用于.slide（）向上和向下事件？我会假设。隐藏和。显示也一样，对吗？

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

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

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

});