jQuery下拉式輸入框無法正常工作

Question

我在包含登錄文本字段的頁面頂部創建了一個小div。一切工作正常excapt，當頁面加載文本框顯示，但我希望它的方式是當頁面加載它不應該顯示，直到我點擊按鈕波紋管下降。現在當它加載它時，它會以相反的方式出現，然後我必須點擊它才能關閉它。可有一個人幫我解決這個問題，以下是我的代碼

//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; 
} 

Answer 1

添加display:none您div#loginbox CSS規則。這將最初隱藏它，然後你的jQuery slideToggle調用將顯示它。

jsFiddle example