Question

通常对于DropDown菜单，您可能会在选择菜单时崩溃，但这不是我的情况。如果用户尝试登录并单击“用户名和密码”，我不想折叠下拉菜单：

http://www.filmgratuiti.org/streamingembed2.php?nome=jobs

我记得它之前有用过，可能是CSS，我在此期间已经清理过了。有一种简单的方法吗？

P.S：我不知道为什么，但看起来我无法分享可点击的链接......

Answer 1

试试这个 HTML

<div class="signup" >
<a href="#">LOGIN</a>  
</div>

<div class="login_form  ">
<form method="post" action="#">
<p>Email</p>
<p><input type="email" name="email" class="email" placeholder="Email"></p>
<p>Password</p>
<p><input type="password" name="password" class="password" placeholder="Password"></p>
<br>
<p><span><input type="checkbox" name="check" class="check" style="vertical-align:middle;">Remember me</span><span class="login_btn" ><a href="#">Login</a></span> </p>

</form>
</div><!-- login_form -->

CSS

.signup
{
background-color:rgb(255,255,255);
width:25%;
height:25px;
border-color:rgb(221,221,221);
border-width:1px;

-moz-border-radius:1px;

-webkit-border-radius:1px;

border-radius:1px;
border-style:solid;
text-align:center;
padding:9px 8px 0 5px;
margin-top:10px;

}

.signup a
{color:#444444;
font-size:0.9375em;
text-decoration:none;
}


.login_form
{   

width:50%;
    height:auto;

padding:10px 0 0 0;

position:absolute !important;


}

.login_form p
{line-height:150%;
font-size:0.875em;
color:#535353;
padding-left:5px;

}

.email, .password
{border:1px solid #D9D8D7;
width:96%;
}

.login_btn
{
display:block;


width:80%;
padding:3px 0 5px 0;
border-color:rgb(242,128,8);
border-width:1px;
border-style:solid;

text-align:center;
margin-bottom:2px;

}

.login_btn a
{color:#fff;
}

JS

$(".login_form").hide();

$(".signup, .login_form").click(function(e) {
    $(".login_form").show();
    e.stopPropagation();
    return true;

   });


  $(document).click(function(){  
  $('.login_form').hide(); //hide the form

  });

这是工作fiddle

下拉菜单始终会在点击时折叠

1 个答案: