ハンバーガーメニューのページ内リンク時にクリックで閉じる

ハンバーガーメニューのページ内リンクをクリックすると
ハンバーガーメニューが閉じるようにしたいと考えています。

◎現状
ハンバーガーメニューの該当箇所をクリックとすると
指定箇所まで移動はしますが、ハンバーガーメニューが閉じずに開いたままになります。

◎やりたい事
ハンバーガーメニュー内のリンクをクリックで該当箇所まで移動と同時にハンバーガーメニューを閉じたいです。

◎試したこと
似たような質問を見たり調べたりして、様々なコードを試してみましたが、
ハンバーガーメニューが開けなかったりしました。
よろしくお願いいたします。

html
1<div class="hamburger sp_img" id="js-hamburger">
2    <span class="hamburger__line hamburger__line--1"></span>
3    <span class="hamburger__line hamburger__line--2"></span>
4    <span class="hamburger__line hamburger__line--3"></span>
5</div>
6
7<div class="black-bg sp_img" id="js-black-bg"></div>
8<div class="global-nav sp_img">
9    <div class="home"><a href="index.html"><img src="img/xxxxxxxxx.svg" alt="xxxxxxxxx" /></a></div>
10    <div class="navi_red">
11        <h4><a href="day_one.html"><img src="img/xxxxxxxxx.svg" alt="xxxxxxxxx" /></a></h4>
12        <ul>
13            <li><a href="#xxxxxxxxx">メニュー</a></li>
14            <li><a href="#xxxxxxxxx">メニュー</a></li>
15            <li><a href="#xxxxxxxxx">メニュー</a></li>
16            <li><a href="#xxxxxxxxx">メニュー</a></li>
17            <li><a href="#xxxxxxxxx">メニュー</a></li>
18            <li><a href="#xxxxxxxxx">メニュー</a></li>
19        </ul>
20    </div>
21    <div class="navi_org">
22        <h4><a href="day_two.html"><img src="img/xxxxxxxxx.svg" alt="xxxxxxxxx" /></a></h4>
23        <ul>
24            <li><a href="#xxxxxxxxx">メニュー</a></li>
25            <li><a href="#xxxxxxxxx">メニュー</a></li>
26            <li><a href="#xxxxxxxxx">メニュー</a></li>
27            <li><a href="#xxxxxxxxx">メニュー</a></li>
28            <li><a href="#xxxxxxxxx">メニュー</a></li>
29            <li><a href="#xxxxxxxxx">メニュー</a></li>
30        </ul>
31    </div>
32</div>

css
1.global-nav {
2    position: fixed;
3    right: -100%;
4    top: 0;
5    width: 100%;
6    height: 100vh;
7    padding-top: 20px;
8    background-color: #fff;
9    transition: all .5s;
10    z-index: 100000;
11    overflow-y: auto;
12    font-family: sans-serif;
13}
14.hamburger {
15    position: fixed;
16    right: 0;
17    top: 0;
18    width: 70px;
19    height: 60px;
20    cursor: pointer;
21    z-index: 100001;
22}
23.global-nav__list {
24    margin: 0;
25    padding: 0;
26    display: block;
27}
28
29.hamburger__line {
30    position: absolute;
31    left: 20px;
32    width: 30px;
33    height: 4px;
34    background-color: #bda69f;
35    transition: all .5s;
36}
37.hamburger__line--1 {
38    top: 20px;
39}
40.hamburger__line--2 {
41    top: 30px;
42}
43.hamburger__line--3 {
44    top: 40px;
45}
46.black-bg {
47    position: fixed;
48    left: 0;
49    top: 0;
50    width: 100vw;
51    height: 100vh;
52    z-index: 90000;
53    background-color: #fff;
54    opacity: 0;
55    visibility: hidden;
56    transition: all .2s;
57    cursor: pointer;
58}
59.nav-open .global-nav {
60    right: 0;
61}
62.nav-open .black-bg {
63    opacity: .8;
64    visibility: visible;
65}
66.nav-open .hamburger__line--1 {
67    transform: rotate(45deg);
68    top: 30px;
69}
70.nav-open .hamburger__line--2 {
71    width: 0;
72    left: 50%;
73}
74.nav-open .hamburger__line--3 {
75    transform: rotate(-45deg);
76    top: 30px;
77}
78.nav-open .global-nav .home img {
79    margin: 0 0 20px 20px;
80    width: 120px;
81}
82.nav-open .global-nav .navi_red {
83    margin: 0 5px 0 20px;
84    padding: 20px 0;
85    width: 43%;
86    display: inline-block;
87    background-color: rgba(220,0,16,1);
88}
89.nav-open .global-nav .navi_org {
90    margin-right: 20px;
91    padding: 20px 0;
92    width: 43%;
93    display: inline-block;
94    background-color: rgba(193,138,75,1);
95}
96.nav-open .global-nav h4 img {
97    margin: 0 0 10px 20px;
98    width: 100px;
99}
100.nav-open .global-nav ul {
101    margin: 0 20px;
102}
103.nav-open .global-nav ul li a {
104    padding:  0 0 0 30px;
105    color: #fff;
106    font-size: 18px;
107    font-weight: bold;
108    line-height: 42px;
109    text-decoration: none;
110    background: url(../img/icon_link.svg) center left no-repeat;
111    background-size: 18px;
112}
113.nav-open .global-nav ul li a:hover {
114    color: #fff;
115    text-decoration: underline;
116}

javascript
1function toggleNav() {
2    var body = document.body;
3    var hamburger = document.getElementById('js-hamburger');
4    var blackBg = document.getElementById('js-black-bg');
5    hamburger.addEventListener('click', function() {
6        body.classList.toggle('nav-open');
7    });
8    blackBg.addEventListener('click', function() {
9        body.classList.remove('nav-open');
10    });
11}
12toggleNav();

hatena19

2020/03/12 05:09

HTMLとCSSのコードも質問に追記してください。

KojiR

2020/03/12 07:54

追記させていただきました。

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

回答2件

以下のようにすれば良いのではないでしょうか。z-indexによりglobal-navのほうがjs-black-bgより上に位置する要素となっているので、クリックイベント自体発生しません。

javascript
1var blackBg = document.querySelector('.global-nav');

投稿2020/03/19 13:58

soliste16

総合スコア757

ベストアンサー

JavaScript
1  body.addEventListener('click', function(event) {
2    if (body.classList.contains('nav-open') && event.target.closest('a')) {
3      hamburger.click();
4    }
5  }, false);