jQueryでTwitterのログインボックスを固定ドロップダウンで出したい

https://twitter.com/signup?lang=ja
こちらのツイッターの新規登録画面での右上にあるログインボタンを押すと出て来る
固定のログインボックスとまったく同じものを作りたいのですが、jQueryでどう書くべきでしょうか？
クリックした際に表示されボックス外をクリックするまで閉じない、といった感じです。
ドロップダウンは検索して出て来るのですが、こちらの場合は少し違った動作をするので質問させてもらいました。

画像

kei344

2016/12/22 10:08

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

visibleセレクタやhide関数、show関数を使うことで実現できると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        #link_div {
8            border: solid 1px #000;
9            width: 150px;
10        }
11    </style>
12</head>
13<body>
14<a id="link_login">ログイン</a>
15<div id="link_div">
16    <label for="id">
17        IDを入力
18        <input id="id" type="text">
19    </label>
20    <label for="pass">
21        パスワードを入力
22        <input id="pass" type="password">
23    </label>
24    <input value="ログイン" type="submit">
25</div>
26<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
27<script>
28    $(document).ready(function () {
29        $("#link_div").hide();
30    });
31
32    $("a#link_login").click(function () {
33        if ($("#link_div").is(":visible")) {
34            $("#link_div").hide();
35        } else {
36            $("#link_div").show();
37        }
38    });
39
40    $("html").click(function () {
41        $("#link_div").hide();
42    });
43
44    $("#link_div").click(function (event) {
45        event.stopPropagation();
46    });
47</script>
48</body>
49</html>