【js・css】ハンバーガーボタンをクリックした際にドロワーメニューより後ろの背景を暗くしたい。

お世話になっております。
表題の通り、
ハンバーガーメニューをクリックしてドロワーメニューが出現すると、ドロワーメニューより下の背景全体(.wrapper)を暗くしたい。という目的があり、取り組んでいます。
意図した結果とならず、解決方法をご相談したいです。

$(function() {
$(".sidebarIconToggle").click(function() {
$(".wrapper_gray").fadeIn();　/ふわっと表示/
});
$(".sidebarIconToggle").click(function() {
$(".wrapper_gray").fadeOut();　/ふわっと消える/
});
});

ですと一回クリックした時にすでにオーバーレイは時間差でfade outしてしまいます。
これを「再びクリックした時」に変更したいです。

どうぞよろしくお願いします。

##html

html
1<main class="wrapper">
2<div class="wrapper_gray"></div>
3
4中略
5
6</main>

##css

css
1.wrapper{
2	position: relative;
3	width: 100vw;
4	height: 100vh;
5	
6}
7.wrapper_gray{
8	display: none;
9      width: 100%;
10      height: 100%;
11      position: fixed;
12      overflow: scroll;
13      top: 0;
14      left: 0;
15      z-index: 1;
16      background: rgba(0,0,0,0.5);
17
18}
19
20/*ハンバーガーボタン*/
21 .c-button {
22  position: relative;
23  display: inline-block;
24  text-decoration: none;
25  -webkit-appearance: none;
26  -moz-appearance: none;
27  appearance: none;
28  border: none;
29  background-color: transparent;
30  cursor: pointer;
31	 z-index: 100;
32	
33}
34.c-button:before{
35	display: block;
36	content: "";
37	background-image: url("../images/lang_btn.svg");
38	background-repeat: no-repeat;
39	width: 27px;
40	height: 17px;
41	position: absolute;
42	margin-top:-9px;
43	right:88%;
44}
45
46
47
48.p-hamburger {
49  position: absolute;
50  top: 70px;
51
52  right: 1%;
53width: 92px;
54  height: 78px;
55	background-color:transparent;
56  margin: 0 auto;
57  -webkit-transition: all .3s ease-in-out;
58          transition: all .3s ease-in-out;
59}
60
61
62.p-hamburger__line {
63  position: absolute;
64  top: 0;
65  right: 0;
66  bottom: 0;
67  left: 0;
68  margin: auto;
69  width: 35px;
70  height: 3px;
71	
72  background-color: #fff;
73  -webkit-transition: inherit;
74          transition: inherit;
75}
76
77.p-hamburger__line::before,
78.p-hamburger__line::after {
79  position: absolute;
80  display: block;
81  width: 100%;
82  height: 100%;
83  background-color: inherit;
84  content: '';
85  -webkit-transition: inherit;
86          transition: inherit;
87}
88
89.p-hamburger__line::before {
90  top: -12px;
91}
92.p-hamburger__line::after {
93  top: 12px;
94}
95
96.p-hamburger[aria-expanded="true"] .p-hamburger__line {
97  background-color: transparent;
98	transform: rotateZ(180deg);
99	
100}
101
102.p-hamburger[aria-expanded="true"] .p-hamburger__line::before,
103.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
104  top: 0;
105  background-color: #fff;
106	
107	
108}
109
110.p-hamburger[aria-expanded="true"] .p-hamburger__line::before {
111  -webkit-transform: rotate(45deg);
112      -ms-transform: rotate(45deg);
113          transform: rotate(45deg);
114	
115	
116}
117
118.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
119  -webkit-transform: rotate(-45deg);
120      -ms-transform: rotate(-45deg);
121          transform: rotate(-45deg);
122	
123}
124.p-hamburger:focus{
125	outline: none;
126}
127
128.u-visuallyHidden {
129  position: absolute;
130  white-space: nowrap;
131  width: 1px;
132  height: 1px;
133  overflow: hidden;
134  border: 0;
135  padding: 0;
136  clip: rect(0 0 0 0);
137  clip-path: inset(50%); 
138  margin: -1px;
139}
140
141/*ハンバーガーボタン終了*/
142
143
144.navi{
145    position: fixed;
146    right: 0;
147		top:70px;
148   width: 0%;
149	 height: 607.5px;
150	transform: translateX(100%);
151background-color:rgba(231,36,32,0.9);
152
153    z-index: 5;
154	transition: all 1s ease;
155	visibility: hidden;
156} 
157.navi.open{
158  height: 607.5px;
159    position: fixed;
160    right: 0;
161    width: 50%;
162	transform: translateX(0%);
163background-color:rgba(231,36,32,0.9);
164
165	visibility: visible;
166  z-index: 5;
167	
168	
169
170}

##JavaScript

JavaScript
1	//ハンバーガーボタンの動作
2(function () {
3  $('#js-buttonHamburger').click(function () {
4    $('body').toggleClass('is-drawerActive');
5	  
6
7    if ($(this).attr('aria-expanded') == 'false') {
8      $(this).attr('aria-expanded', true);
9    } else {
10      $(this).attr('aria-expanded', false);
11    }
12  });
13}) ();
14	
15//ドロワーメニューが開く
16$(function(){
17  $('.sidebarIconToggle').click(function(){
18  //要素のクラス名がnaviからopenに切り替わる
19  $('.navi').toggleClass("open");
20$('.wrapper').toggleClass("wrapper_gray");
21  });
22
23});
24	//スライドショーslickのカスタマイズ	
25$(function(){
26
27$('.slider').slick({
28autoplay: true,
29autoplaySpeed: 5000,
30	cssEase: "ease-in-out"
31
32});
33
34});
35//ハンバーガーボタン以外の場所をクリックしても閉じる      
36     $(function(){
37  $('.wrapper').click(function(){
38  //要素のクラス名がnavibgからopenに切り替わる
39  $('.navi').toggleClass("open");
40    if ($('#js-buttonHamburger').attr('aria-expanded') == 'false') {
41      $('#js-buttonHamburger').attr('aria-expanded', true);
42    } else {
43      $('#js-buttonHamburger').attr('aria-expanded', false);
44    }
45
46  });
47
48});
49  $(function() {
50       $(".sidebarIconToggle").click(function() {
51             $(".wrapper_gray").fadeIn();　/*ふわっと表示*/
52   });
53       $(".sidebarIconToggle").click(function() {
54             $(".wrapper_gray").fadeOut();　/*ふわっと消える*/
55   });
56  });

Lhankor_Mhy

2021/10/01 04:31

「なかなか実現しない」とのことですが、具体的には何が起きていますか？結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2

ema-material

2021/10/01 04:45

失礼しました。 //ドロワーメニューが開く $(function(){ $('.sidebarIconToggle').click(function(){ //要素のクラス名がnaviからopenに切り替わる $('.navi').toggleClass("open"); $('.wrapper').toggleClass("wrapper_gray"); }); }); のようにしましたが全く反応せずというところです。

Lhankor_Mhy

2021/10/01 04:47

「全く反応せず」とのことですが、 $('.navi').toggleClass("open"); も実行されないということですか？

ema-material

2021/10/01 04:52

$('.navi').toggleClass("open"); は実現できています。

Lhankor_Mhy

2021/10/01 04:59

$('.wrapper').toggleClass("wrapper_gray"); は実行されていますか？

ema-material

2021/10/01 05:06

いえ、実行されていません。

Lhankor_Mhy

2021/10/01 05:11

実行されていないことは、どのような方法で確認されましたか？

ema-material

2021/10/01 05:13

ローカルで作業したブラウザで動作せず、コンソールにも特に何も出ていません。

Lhankor_Mhy

2021/10/01 05:31

$('.wrapper').toggleClass("wrapper_gray"); が実行されているが、想定している動作をしていない、ということもあるように思えます。 .toggleClass()が働いていないのであれば、クラスが変化しないということになると思いますが、それは確認しましたか？

ema-material

2021/10/01 05:37

>クラスが変化しないということになると思いますが、それは確認しましたか？こちらに感して確認方法がわからないのです。申し訳ありません。

Lhankor_Mhy

2021/10/01 05:46

開発者ツールで確認してみてください。 https://www.buildinsider.net/web/chromedevtools/01#:~:text=elements%E3%83%8F%E3%82%9A%E3%83%8D%E3%83%AB%E3%81%AF%E3%80%81%E3%82%BF%E3%82%AF%E3%82%99%E3%81%AE%E8%A6%81%E7%B4%A0%E3%81%A8%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%92%E6%A4%9C%E8%A8%BC%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E6%A9%9F%E8%83%BD%E3%81%A6%E3%82%99%E3%81%82%E3%82%8A

ema-material

2021/10/01 06:19

申し訳ありません。htmlに不備がありましたというミスでした。続けて質問させてください。 $(function() { $(".sidebarIconToggle").click(function() { $(".wrapper_gray").fadeIn();　/*ふわっと表示*/ }); $(".sidebarIconToggle").click(function() { $(".wrapper_gray").fadeOut();　/*ふわっと消える*/ }); }); ですと一回クリックした時にすでにオーバーレイは時間差でfade outしてしまいます。これを「再びクリックした時」に変更したいです。どうぞよろしくお願いします。

Lhankor_Mhy

2021/10/01 06:21

こちらでよさそうです。 https://api.jquery.com/fadeToggle/

ema-material

2021/10/03 06:23

ありがとうございます。試してみます！

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

回答1件

ベストアンサー

暗めのオーバーレイを設置してopacityを設定すればよいでしょう

投稿2021/10/01 04:46

yambejp

総合スコア116835

ema-material

2021/10/01 06:19

ありがとうございます。近しいものができました。引き続き質問させてください。 $(function() { $(".sidebarIconToggle").click(function() { $(".wrapper_gray").fadeIn();　/*ふわっと表示*/ }); $(".sidebarIconToggle").click(function() { $(".wrapper_gray").fadeOut();　/*ふわっと消える*/ }); }); ですと一回クリックした時にすでにオーバーレイは時間差でfade outしてしまいます。これを「再びクリックした時」に変更したいです

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