【Javascript】ページ内遷移はするもののハンバーガーメニューが閉じません(;^

ハンバーガーメニューでページ内遷移は実装できましたが、遷移後もメニューが開いたままになってしまいます。

特にエラーは出ておりません。

該当のソースコード

html
1<div class="modalbtn" id="modalbtn">
2		<span class="modal-link close" id="js-modal-link"></span>
3	</div>
4	<ul class="modal-menu-list close" id="modal-menu-list">
5		<li class="modal-menu-item"><a class="modal-menu-link" href="#page-concept">Concept</a></li>
6		<li class="modal-menu-item"><a class="modal-menu-link" href="#page-about">About</a></li>
7		<li class="modal-menu-item"><a class="modal-menu-link" href="#page-service">Service</a></li>
8		<li class="modal-menu-item"><a class="modal-menu-link" href="#page-works">Works</a></li>
9		<li class="modal-menu-item"><a class="modal-menu-link" href="#page-contact">Contact</a></li>
10	</ul>

css
1.modal-menu-list {
2  display: none;
3  position: fixed;
4  top:0;
5  left: 0;
6  z-index: -1;
7  width: 100%;
8  height: 100vh;
9  margin: 0;
10  padding: 3em 1em;
11  background: rgba(255, 255, 255, 0.9);
12  text-align: center;
13  list-style: none;
14}
15
16.modal-menu-list.open {
17  display: block;
18  z-index: 1;
19  animation: showAni .5s ease 0s 1 normal;
20}
21
22@keyframes showAni {
23   0% {
24     opacity: 0;
25   }
26   100% {
27     opacity: 1;
28   }
29}
30.modal-menu-list.close {
31  display: none;
32  z-index: 0;
33  animation: hideAni .5s ease 0s 1 normal;
34}
35
36@keyframes hideAni {
37   0% {
38     opacity: 1;
39     z-index: 1;
40   }
41   100% {
42     opacity: 0;
43     z-index: -1;
44   }
45}

javascript
1function navToggle() {
2
3  var body = document.body;
4
5  var modalMenuLink = document.getElementsByClassName('modal-menu-link');
6
7  // 開閉ボタンを取得
8  var toggleBtn = document.getElementById('js-modal-link');
9
10  // 開閉するナビゲーション本体を取得
11  var navView = document.getElementById('modal-menu-list');
12
13  // 開閉ボタンの現在のクラスを取得
14  var toggleBtnClass = toggleBtn.getAttribute('class');
15
16 // 開閉ボタンのクラスで条件分岐
17 // 1. 開閉ボタンのクラスが「close」だったら
18 if (toggleBtnClass == 'modal-link close') {
19
20   // 閉じている状態のクラスを削除
21   toggleBtn.classList.remove('close');
22   navView.classList.remove('close');
23   body.classList.remove('close');
24
25   // 開いている状態のクラスを付与
26   toggleBtn.classList.add('open');
27    navView.classList.add('open');
28    body.classList.add('open');
29 }
30
31  // 2. 開閉ボタンのクラスが「open」だったら
32  else {
33
34   // 開いている状態のクラスを削除
35   toggleBtn.classList.remove('open');
36   navView.classList.remove('open');
37   body.classList.remove('open');
38
39   // 閉じている状態のクラスを付与
40   toggleBtn.classList.add('close');
41   navView.classList.add('close');
42   body.classList.add('close');
43
44}
45
46if (toggleBtnClass == 'modal-link open') {
47
48  modalMenuLink.addEventListener('click' ,function() {
49
50
51    // 開いている状態のクラスを削除
52    toggleBtn.classList.remove('open');
53    navView.classList.remove('open');
54    body.classList.remove('open');
55
56    // 閉じている状態のクラスを付与
57    toggleBtn.classList.add('close');
58    navView.classList.add('close');
59    body.classList.add('close');
60  });
61
62}
63
64}
65
66// 指定IDをクリックした際に関数を実行
67document.getElementById('js-modal-link').onclick = navToggle;

試したこと

「ハンバーガーメニュ―内のリンクをクリックしたら、openクラスを取りcloseクラスを付与する」という処理をしていますが、変化はありませんでした。

コード長くなりすぎましたが、お力をいただけるとうれしいですm(__)m

stdio

2019/03/06 02:27

単に通っていない可能性があります。ログ張ってみてみると有効でしょう。

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

回答1件

ベストアンサー

初回クリック時に toggleBtnClass は 'modal-link close' なので下記部分が動かないからです。
そもそもこの書き方でしてしまうと、メニューを開け閉めするたびに多重にクリックイベントを付与することになるので、この部分はjs-modal-linkの.onclickから外しましょう。

js
1if (toggleBtnClass == 'modal-link open') {
2
3  modalMenuLink.addEventListener('click' ,function() {
4
5
6    // 開いている状態のクラスを削除
7    toggleBtn.classList.remove('open');
8    navView.classList.remove('open');
9    body.classList.remove('open');
10
11    // 閉じている状態のクラスを付与
12    toggleBtn.classList.add('close');
13    navView.classList.add('close');
14    body.classList.add('close');
15  });
16
17}