ハンバーガーメニューをページ内リンクに飛んだのちに消したいです

ページ内リンクを押してもメニューが表示されたままです。
ボタンを押したときと同じように消したいです。
エラーメッセージはありません。

html
1 <div class="bb">
2        <div class="b">
3          <a class="menu">
4            <span class="menu__line menu__line--top"></span>
5            <span class="menu__line menu__line--center"></span>
6            <span class="menu__line menu__line--bottom"></span>
7          </a>
8          <nav class="gnav">
9            <div class="gnav_wrap">
10              <ul class="gnav_menu">
11                <li class="gnav_menu_item"><a href="#home">1</a></li>
12                <li class="gnav_menu_item"><a href="#intro">2</a></li>
13                <li class="gnav_menu_item"><a href="#point">3</a></li>
14                <li class="gnav_menu_item"><a href="#plan">4</a></li>
15                <li class="gnav_menu_item"><a href="#hotel">5</a></li>
16                <li class="gnav_menu_item"><a href="#sche">6</a></li>
17                <li class="gnav_menu_item"><a href="#howto">7</a></li>
18                <li class="gnav_menu_item"><a href="#pcr">8</a></li>
19                <li class="gnav_menu_item"><a href="#reser">9</a></li>
20                <li class="gnav_menu_item"><a href="#info">10</a></li>
21              </ul>
22            </div>
23          </nav>
24        </div>
25      </div>

css
1.gnav_menu{
2  padding: 0;
3}
4
5.menu{
6  height: 20px;
7  position: fixed;
8  right: 30px;
9  top: 30px;
10  width: 30px;
11  z-index: 99;
12}
13.menu__line{
14  background: #fff;
15  display: block;
16  height: 2px;
17  position: absolute;
18  transition:transform .3s;
19  width: 100%;
20}
21.menu__line--center{
22  top: 9px;
23}
24.menu__line--bottom{
25  bottom: 0;
26}
27.menu__line--top.active{
28  top: 8px;
29  transform: rotate(45deg);
30}
31.menu__line--center.active{
32  transform:scaleX(0);
33}
34.menu__line--bottom.active{
35  bottom: 10px;
36  transform: rotate(135deg);
37}
38
39.gnav{
40  height: 100%;
41  background: rgba(0,0,0,0.8);
42  display: none;
43  position: fixed;
44  top: 0;
45  width: 100%;
46  z-index: 98;
47}
48
49.gnav.active {
50  display: block;
51  opacity: 1;
52  overflow: auto;
53  position: fixed;
54  top: 0;
55  left: 0;
56  width: 100%;
57  height: 100%;
58  background: rgba(0,0,0,0.8);
59}
60
61.gnav_menu{
62  list-style: none;
63}
64
65.gnav_menu_item{
66  margin: 40px 0;
67}
68
69.gnav_menu_item a{
70  color: #fff;
71  font-size: 2em;
72  font-weight: bold;
73  padding: 40px;
74  text-decoration: none;
75}
76

js
1$(function(){
2	// #で始まるリンクをクリックしたら実行されます
3	$('a[href^="#"]').click(function() {
4		var speed = 2500; // ミリ秒で記述
5		var href= $(this).attr("href");
6		var target = $(href == "#" || href == "" ? 'html' : href);
7		var header = $('header').height();
8		var position = target.offset().top - header;
9		$('body,html').animate({scrollTop:position}, speed, 'swing');
10		return false;
11	});
12});
13
14jQuery(function ($) {
15  $(function () {
16    $(".menu").on("click", function () {
17      if ($(this).hasClass("active")) {
18        $(this).removeClass("active");
19        $(".gnav").removeClass("open").fadeOut(500);
20      } else {
21        $(this).addClass("active");
22        $(".gnav").fadeIn(500).addClass("open");
23      }
24    });
25  });
26}); 
27

m.ts10806

2020/10/12 04:18

Javaは本件とは関係ないかと思います。

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

回答1件

ベストアンサー

下記でどうですか。

js
1$(function(){
2    // #で始まるリンクをクリックしたら実行されます
3    $('a[href^="#"]').click(function() {
4        var speed = 2500; // ミリ秒で記述
5        var href= $(this).attr("href");
6        var target = $(href == "#" || href == "" ? 'html' : href);
7        var header = $('header').height();
8        var position = target.offset().top - header;
9        $('body,html').animate({scrollTop:position}, speed, 'swing');
10        $(".menu").click(); // .menuをクリックしたことにする
11        return false;
12    });
13});