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

添加display:none到您的div#loginboxCSS 规则中。这将最初隐藏它，然后您的 jQueryslideToggle调用将显示它。

jsFiddle 示例

于 2012-08-08T16:08:52.950 回答