0

ログインテキストフィールドを含む小さなdivをページの上部に作成しました。ページが読み込まれるとテキストボックスが表示されることを除けば、すべて正常に機能しますが、ページが読み込まれると、下のボタンをクリックしてドロップダウンするまで表示されないようにする必要があります。今のところ、ロードすると逆に動作し、表示されたらクリックして閉じる必要があります。誰かが私がこの問題を解決するのを手伝ってくれるでしょうか？以下は私のコードです

//JQuery

      $(".logbtn").click(function(){ 
      $("#loginbox").slideToggle("slow");
      $(this).toggleClass("active");

    });

// HTML

 <div id="log">

 <div id="loginbox">
 <form method="post" action="login.php">
   <p><input type="text" name="username"  value="username" id="usernamelog"/></p>
   <p>Password: <input type="password" name="password" /></p>
   <p><input type="submit" name="login" value="Login"/></p>  
 </form>

 </div>
 <a class="logbtn">Login</a>

 </div>

// CSS

div#log{
width:301px;
position:absolute;
margin-top:0px;
margin-left:650px;
}


div#loginbox{
width:300px;
background-color:#efebee;
padding-left:10px;
top:2px;
padding-bottom:10px;
border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
}


.logbtn{
 width:200px;
 background-color:black;
 padding:7px 30px;
}
4

1 に答える 1

1

CSSルールに追加display:noneします。div#loginboxこれにより、最初は非表示になり、次にjQueryslideToggle呼び出しで表示されます。

jsFiddleの例

于 2012-08-08T16:08:52.950 に答える