特定の要素以外をクリックした時の動き

前提

いつもお世話になっております。
今回お聞きしたい内容についてですが、jqueryを使用したclassの付与についてです。
ヘッダーのサインイン部分をクリックすると「visibility: hidden;」で非表示にしていたログイン画面にclass「login」が付与され、それによって前面にログイン画面が表示され、ログインメニュー以外の外側をクリックするとclass「login」を取り除き、もう一度「visibility: hidden;」にてログイン画面を隠すといったものを作りたいのですが、jqueryがうまく書けません。

検索し色々と試したのですが、どうすればうまく動くのかわからないので質問させていただきます。

実現したいこと

ログイン画面の表示、非表示の仕方。

ヘッダーのサインインでログイン画面表示。
→ログイン画面(メールアドレスやパスワードを入力する画面)以外の外側をクリックすることで、要素を再度非表示にしたい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html（ログイン画面）
1<div id="login_menus">
2    <div id="login_list">
3        <div class="login_top">
4            <h2>ログイン</h2>
5        </div>
6        <form action="" method="POST">
7            <dl  class="login_btn">
8                <dd>
9                    <input name="text" type="email" placeholder="メールアドレス">
10                </dd>
11                <dd>
12                    <input name="pasword" type="pasword" placeholder="パスワード">
13                </dd>
14                <dd>
15                    <button name="btn" type="submit">送信</button>
16                </dd>
17            </dl>
18            <dl class="login_sns"> <!-- ここの下はsnsへのアクセスの画像 -->
19                <dd>
20                    <button type="button" class="sns_btn" name="Twitter">
21                        <img src="./img/？？？.png">
22                    </button>
23                </dd>
24                <dd>
25                    <button type="button" class="sns_btn" name="facebook">
26                        <img src="./img/？？？.png">
27                    </button>
28                </dd>
29                <dd>
30                    <button type="button" class="sns_btn" name="google">
31                        <img src="./img/？？？.png">
32                    </button>
33                </dd>
34                <dd>
35                    <button type="button" class="sns_btn" name="apple">
36                        <img src="./img/？？？.png">
37                    </button>
38                </dd>
39            </dl>
40        </form>
41    </div>
42</div>
43

css
1#login_menus {
2    position: fixed;
3    left: 0;
4    top: 0;
5    width: 100%;
6    height: 100%;
7    display: flex;
8    justify-content: center;
9    align-items: center;
10    z-index: 998;
11    background-color: rgba(0, 0, 0, 0.5);
12    visibility: hidden;
13}
14
15#login_list {
16    background-color: white;
17    margin: 5px 0;
18    width: 40%;
19    height: 90%;
20    border-radius: 15px;
21    z-index: 999;
22}
23
24.login_top h2 {
25    font-size: 1.2rem;
26    text-align: center;
27    border-bottom: 1px solid rgba(0, 0, 0, 0.7);
28    padding: 1rem 0;
29    margin: 0;
30}
31
32.login_btn {
33    padding: 20px;
34    margin: 0;
35}
36
37.login_btn dd {
38    margin: 0;
39    padding: 5px;
40}
41
42.login_btn dd input {
43    width: 100%;
44    padding: 5px 2.5px;
45    border-radius: 12px;
46    border: 1px solid rgba(0, 0, 0, 0.7);
47    font-size: 1.2rem;
48}
49
50.login_btn button {
51    background-color: rgba(215, 4, 102, 1);
52    color: white;
53    width: 102%;
54    border-radius: 12px;
55    border: 1px solid rgba(0, 0, 0, 0.7);
56    font-size: 1.2rem;
57    padding: 5px 3px;
58    text-align: center;
59}
60
61.login_sns dd button img {
62    width: 1.5rem;
63}
64
65.login_sns dd {
66    margin: 0;
67    display: flex;
68    justify-content: center;
69    padding: 5px;
70}
71
72.sns_btn {
73    background-color: white;
74    width: 90%;
75    border-radius: 12px;
76    padding: 5px 2.5px;
77    border: 1px solid rgba(0, 0, 0, 0.7);
78    font-size: 0.1rem;
79}
80
81#login_menus.login {
82    visibility: visible;
83}

jquery
1$(function(){
2	$('.menu_sinin').click(function(){
3		if(!$('#login_menus').hasClass('login')){
4			$('#login_menus').addClass('login');
5		}
6	})
7});
8
9//この下は試してうまくいかない箇所になります。
10$(function(){
11	$(document).click(function(){
12		if($('#login_menus').hasClass('login')){
13			if(!$(event.target).on('#login_list')){
14				$('#login_menus').removeClass('login');
15			}
16		}
17	})
18});

試したこと

他にも色々と調べ、if文の並びを変えてみたり、Clickの部分をonにしたり色々としてみたのですが、うまくいきません。
基本的な部分かもしれませんが、お知恵をお借りできればと思っています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

以下のように #login_menus のクリックハンドラを追加でどうでしょう？

diff
1 $(function(){
2   $('.menu_sinin').click(function(){
3     if(!$('#login_menus').hasClass('login')){
4       $('#login_menus').addClass('login');
5     }
6   })
7+  $('#login_menus').click(function ({ target }) {
8+    if (target === this) {
9+      $('#login_menus').removeClass('login');
10+    }
11+  });
12 });

補足

上記回答のコード追加によって、質問にある

// 試していまくいかない箇所

は不要になります。

diff
1-//この下は試してうまくいかない箇所になります。
2-$(function(){
3-  $(document).click(function(){
4-    if($('#login_menus').hasClass('login')){
5-      if(!$(event.target).on('#login_list')){
6-        $('#login_menus').removeClass('login');
7-      }
8-    }
9-  })
10-});