1

私は JQuery の初心者で、非表示のログイン フォームと非表示のサインアップ フォームをスライド トグル機能を使用して表示したいと考えていました。私が抱えている問題は、リンクをクリックするとフォームが表示されますが、フォームの幅に応じてその横のリンクもプッシュされ、メニュー全体の外観が損なわれることです。これを防ぐ方法はありますか？

html 部分の私のコードは次のようになります。

<!-- Login Starts Here -->
<div id="loginContainer">
    <a href="#" id="loginButton"><span>LOGIN</span><em></em></a>
        <div id="loginBox" style="display:none">                
            <form id="loginForm">
            <!--FORM STUFF-->
            </form>
        </div>
</div>
<!-- Login Ends Here -->
<!-- Sign Up Starts Here -->
<div id="signUpContainer">
    <a href="#" id="signUpButton"><span>Sign Up</span><em></em></a>
        <div id="signUpBox" style="display:none">                
            <form id="signUpForm">
            <!--FORM STUFF-->
            </form>
        </div>
</div>

JQuery 部分のコードは次のようになります。

$(function () {
     $('#signUpButton').click(function () {
         $('#signUpBox').slideToggle(200);
         $(this).toggleClass("active");
     });
     $('#loginButton').click(function () {
         $('#loginBox').slideToggle(200);
         $(this).toggleClass("active");
     });
 });

また、私が抱えている問題をよりよく示すために、jsfiddle を作成しました: http://jsfiddle.net/smsyr/3/

どんな助けでも大歓迎です。どうもありがとうございました！

4

4 に答える 4

0

あなたのフィドルを変更したので、次の CSS スタイルを変更しました (結果はこちら):

#signUpContainer {
    font-size:12px;
    font-family:'Montserrat', Helvetica;
    float: left;
    width: 230px; /* here */
    background-color: #000;  /* here */
}

#loginContainer {
    font-size:12px;
    font-family:'Montserrat', Helvetica;
    float: left;
    width: 230px;  /*here*/
    background-color: #000;  /*here*/
}

CSS に 2 つの新しい項目を追加しました。

#loginBox {
    background-color: #FFF;  /* or transparent */
}

#signUpBox {
    background-color: #FFF; /*or transparent*/
}
于 2013-10-16T18:35:57.720 に答える
0

jfiddleの更新を確認してください...

フォームのdivの外にリンクを追加しただけです..

<div class="something">
    <a href="#" id="signUpButton"><span>SIGN UP</span><em></em></a>
    <a href="#" id="loginButton"><span>LOGIN</span><em></em></a>  
</div>

そしてcssで

.something {
    position:absolute;
    margin: 0 auto;
}
于 2013-10-16T18:38:54.590 に答える
0

これは、要素の配置が原因です。すでにスタイルが設定されているクラス/ID がある場合は、それに追加position: absolute;するだけです。それ以外の場合は、絶対に追加するクラス/ID を作成する必要があります。フィドルを見て、それがどのように機能しているかを示してください。

これは、フォームが でラップされているためにも発生しましたdiv。この要素はデフォルトでブロック要素であり、幅または高さに応じて 2 番目のボタンを押し下げます。

#loginBox {
  position: absolute;
}

ドロップダウンが 2 つ以上ある場合は、この設定方法を書き直すことを検討してください。すべてのフォームにabsoluteを追加すると、デフォルトではすべて左/上に配置されるため、それらは一緒に粉砕されます。デフォルトでは0です。

JSFIDDLE

于 2013-10-16T18:32:02.557 に答える
0

HTML マークアップを変更する

書きます ：

<a href="#" id="loginButton"><span>LOGIN</span><em></em></a>
<a href="#" id="signUpButton"><span>SIGN UP</span><em></em></a>

これがフィドルです。

于 2013-10-16T18:24:16.830 に答える