Javascript 如何做Dropbox般的登录按钮？

我正在尝试做类似Dropbox的登录按钮。 有一个线程，但我不能在这上面做些什么。 我想在我按下与dropbox.com相同的登录按钮时打开它

这是一个示例代码。现在它在hover上工作。但我想点击一下。我试着集中注意力，但没有成功

<div id="login">
    <a href="#">Login</a>
    <div>
        Login Form
        Lorem Ipsum blablbalbabababa lbablaabalbalba
    </div>
</div>

这是该代码的演示

---

使用Jquery可能更容易，但我不知道如何使用

只需删除此规则即可：

div#login:focus div {
    visibility: visible;
}

然后，这段jQuery将使其在单击时可见：

$("#login a").click(function(){
    $("#login div").css("visibility","visible");
});

您可以在此处看到it操作：

（我添加了一个边距，这样JSFIDLE“Result”横幅就不会妨碍点击。）

编辑：如果您在单击其他位置时要求行为同时“关闭”登录区域，请尝试以下操作：

---

你可以试试这个

很好。但是现在当我打开它时，它永远不会关闭。就像我在背景上单击鼠标的dropbox一样，登录栏会消失。@SnaRe试试这个：（注意使用了不同的选择器。

#login

而不是

#login a

）谢谢。这就是我要找的。但是如果你有时间，如果可能的话，你能优化css吗。我认为它应该更复杂。但是如果你没有时间，没有问题。谢谢你的解决方案。

$("#login a").click(function(){
    $("#login div").css("visibility","visible");
});

$("#login").click(function(e){
    $("#login div").css("visibility","visible");
    e.stopPropagation();
});

$("body").click(function(e){
    $("#login div").css("visibility","hidden");
});