【jQuery】ハンバーガーメニューの実装について、表示・非表示

前提・実現したいこと

webサイト制作を勉強しています。初心者です。
ハンバーガーメニューを実装しています。
現在、ハンバーガーメニューを表示されますが、メニューのリンクを押しても、ハンバーガーメニューの中身が表示したままです。

メニューのリンクを押したら、メニューを非表示にさせたいです。

該当のソースコード

var navFlg = false;
$('.menu').on('click',function(){
    $('.menu__line').toggleClass('active');
    $('.gnav').fadeToggle();
    if(!navFlg){
        $('.gnav__menu__item').each(function(i){
            $(this).delay(i*300).animate({
                'margin-left' : 0,
                'opacity' : 1,
            },500);
        });
        navFlg = true;
    }
    else{
        $('.gnav__menu__item').css({
            'margin-left' : 100,
            'opacity' : 0,
        });
        navFlg = false;
    }
});

<body>
    <a class="menu">
        <span class="menu__line menu__line--top"></span>
        <span class="menu__line menu__line--center"></span>
        <span class="menu__line menu__line--bottom"></span>
    </a>
    <nav class="gnav">
        <div class="gnav__wrap">
            <ul class="gnav__menu">
                <li class="gnav__menu__item"><a href="">About</a></li>
                <li class="gnav__menu__item"><a href="">Works</a></li>
                <li class="gnav__menu__item"><a href="">Recruit</a></li>
                <li class="gnav__menu__item"><a href="">News</a></li>
                <li class="gnav__menu__item"><a href="">Contact</a></li>
            </ul>
        </div><!--gnav-wrap-->
    </nav>
    <div class="hero"></div>
</body>
コード

.menu{
    height: 20px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    z-index: 99;
}
.menu__line{
    background: #fff;
    display: block;
    height: 2px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
.menu__line--center{
    top: 9px;
}
.menu__line--bottom{
    bottom: 0;
}
.menu__line--top.active{
    top: 8px;
    transform: rotate(45deg);
}
.menu__line--center.active{
    transform:scaleX(0);
}
.menu__line--bottom.active{
    bottom: 10px;
    transform: rotate(135deg);
}


/*gnav*/
.gnav{
    background: rgba(0,0,0,0.8);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 98;
}
.gnav__wrap{
    align-items:center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
}
.gnav__menu__item{
    margin: 40px 0;
}
.gnav__menu__item a{
    color: #fff;
    font-size: 2em;
    font-weight: bold;
    padding: 40px;
    text-decoration: none;
    transition: .5s;
}
.gnav__menu__item a:hover{
    color: #666;
}

コード

補足情報（FW/ツールのバージョンなど）

下記のURL参考にして実装しています（応用編）
https://webdesignday.jp/inspiration/technique/html/4746/

kei344

2019/10/12 07:40

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

isseitakeda

2019/10/12 07:53

ご回答ありがとうございます。コードの追加を致しました。よろしくお願い致します。

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

回答1件

ベストアンサー

閉じる処理を追加しましょう。

js
1$('.gnav__menu__item').on('click',function(){
2    $('.menu').trigger('click');
3});
4```**動くサンプル：**[https://jsfiddle.net/9v4Ls8fj/](https://jsfiddle.net/9v4Ls8fj/)
5
6---
7
8【.trigger() | jQuery API Documentation】
9[https://api.jquery.com/trigger/](https://api.jquery.com/trigger/)
10
11---
12
13また、`<a class="menu">`はリンクでないなら（hrefを指定しないなら）`div`要素とかにするほうがよいです。