0

こんにちは、私はこのコードで約 24 時間髪を伸ばしています。

私が達成したいのは、ページを上下にスライドさせる単純なサインイン/サインアップオプションであり、サインインをクリックするたびにサインアップフォームが表示されると、他のフォームが非表示になり、その逆も同様です。

私のコードで何が起こるかというと、サインアップまたはサインインのアンカーをクリックすると、そのアンカーが消え、フォームが単に .()show コマンドのスライドアップまたはダウンに追従しませんが、作成したキャンセルボタンを押すとフォームを非表示にするイベント .slideUp() のアニメーションが押し出され、フォームが非表示になります。フォームが表示されている場合はいつでも、サインアップと言ってみましょう.2つのフォームのサインをクリックすると、同時に表示されます.

この人たちと一緒に私を助けてくれませんか?どうもありがとうございました!

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

あなたのコードには、次のような問題がいくつかあります。

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);
    

    }

  • 2番目のものについては、HTML要素間の競合を避けるために別のクラス名を使用することをお勧めします.

    $(document).ready(function (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 に答える