Question

我在页面顶部创建了一个包含登录文本字段的小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;
}

Answer 1

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

<强> jsFiddle example

jquery下拉输入框无法正常工作

1 个答案: