トグルメニューと絞り込みを使った時メニューが閉じない

「ハンバーガーメニューをページ内リンクで実装すると閉じない」という質問は何度かあったので参考にしてみたのですが、改善されず困っています。

トグルメニュー内をクリックすると、一番上に上がって適合するclassのリストだけ表示するというものを作っていますが、リストの表示、上に上がるという作業はできたもののメニューが閉じません。

メニューを閉じる方法はありますでしょうか？

html
1<!-- 中身 -->
2<ul class="sidemenu" id="list">
3    <li class="ALL tagA">
4        タグAの中身
5    </li>
6    <li class="ALL tagB">
7        タグBの中身
8    </li>
9    <li class="ALL tagC">
10        タグCの中身
11    </li>
12</ul>
13<!-- ナビ -->
14<nav class="global-nav">
15<ul class="sidemenu global-nav__list" id="sidenavi_inner">
16    <li class="global-nav__item">
17        <span data-filter="ALL">全て表示</span>
18        <ul><!-- 入れ子もある -->
19            <li><span data-filter="tagA">タグA</span></li>
20        </ul>
21        <ul class="subMenu">
22            <li><span data-filter="tagB">タグB</span></li>
23            <li><span data-filter="tagC">タグC</span></li>
24        </ul>
25    </li>
26</ul>
27</nav>
28<!-- ボタン -->
29<div class="hamburger" id="js-hamburger">
30    <label id="nav-open" for="nav-input"><span class="nav-open1">開く</span></label>
31</div>
32<!-- ハンバーガー表示の時の黒背景 -->
33<div class="black-bg" id="js-black-bg"></div>

css
1    .global-nav {
2    position: fixed;
3    left: -80vw;
4    top: 0;
5    width: 80vw;
6    height: 100vh;
7    padding-top: 40px;
8    background-color: #f3f3f3;
9    transition: all .6s;
10    z-index: 9999;
11    overflow-y: auto;
12  }
13  .hamburger {
14	  position: fixed;
15	  right: 5px;
16	  bottom: 10px;
17	  z-index: 300;
18	  width: 50px;
19      height: 50px;
20      background-color:#CCC;
21	  display: block;
22	  cursor: pointer;
23  }
24  .global-nav__list {
25	margin: 0;
26	padding: 0;
27	list-style: none;
28  }
29  .global-nav__item {
30	text-align: center;
31	padding: 0 14px;
32  }
33  .global-nav__item a {
34	display: block;
35	padding: 8px 0;
36	border-bottom: 1px solid #eee;
37	text-decoration: none;
38	color: #111;
39  }
40  .global-nav__item a:hover {
41	background-color: #eee;
42  }
43  .hamburger__line {
44	  width: 50px;
45	  height: 50px;
46	  display: block;
47	  background: url(https://●●.png);
48	  background-repeat: no-repeat;
49	  background-size: 50px;
50	  cursor: pointer;
51  }
52  
53  .black-bg {
54	position: fixed;
55	left: 0;
56	top: 0;
57	width: 100vw;
58	height: 100vh;
59	z-index: 8000;
60	background-color: #000;
61	opacity: 0;
62	visibility: hidden;
63	transition: all .6s;
64	cursor: pointer;
65  }
66  /* 表示された時用のCSS */
67  .nav-open .global-nav {
68	left: 0;
69  }
70  .nav-open .black-bg {
71	opacity: .8;
72	visibility: visible;
73  }

javasript
1var findspan = $('#sidenavi_inner').find('span');
2//ハンバーガーメニュー表示
3function toggleNav() {
4  var body = document.body;
5  var hamburger = document.getElementById('js-hamburger');
6  var blackBg = document.getElementById('js-black-bg');
7
8  hamburger.addEventListener('click', function() {
9    body.classList.toggle('nav-open');
10  });
11  blackBg.addEventListener('click', function() {
12    body.classList.remove('nav-open');
13  });
14}
15toggleNav();
16//クリックされたタグと同じタグが付いた記事だけ表示
17$(findspan).click(function () {
18    var image = $(this).attr("data-filter");
19    $("#list li").each(function () {
20        $(this).animate({
21            "opacity": 4
22        }, 300, function () {
23            $(this).hide();
24            if ($(this).hasClass(image) || image == "ALL") {
25                $(this).show();
26                $(this).animate({
27                    "opacity": 1
28                }, 300);
29            }
30        });
31    });
32    //毎回topに上げる
33    var position = $('#recommendPage').offset().top;
34    $('html,body').scrollTop(position + -60);
35    return false;
36
37    var blackBg = document.getElementById('js-black-bg');
38
39    body.classList.toggle('nav-open');
40});

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

回答1件

ベストアンサー

js
1    //毎回topに上げる
2    var position = $('#recommendPage').offset().top;
3    $('html,body').scrollTop(position + -60);
4    return false; // ↓これ以降のコードは実行されない。
5
6    var blackBg = document.getElementById('js-black-bg');
7
8    body.classList.toggle('nav-open');