スマホ用ハンバーガーメニューの開閉について

Question

前提・実現したいこと

レスポンシブのスマホ用に、ハンバーガーメニューを設置したいと思っています。

発生している問題・エラーメッセージ

ハンバーガーメニュー内のページ内リンクをクリックしてもメニューが開いたまま

該当のソースコード

<div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>

      <div id="nav-content">
      	<ul>
      		<li><a href="#sec01">テキスト</a></li>
      		<li><a href="#sec02">テキスト</a></li>
      		<li><a href="#sec03">テキスト</a></li>
      		<li><a href="#sec04">テキスト</a></li>
      		<li><a href="#sec05">テキスト</a></li>
      	</ul>
      </div>

</div>

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

@media screen and (min-width:640px) {
  #nav-open {
    display:none;
  }
}

$(function(){
     $('#nav-input a').on('click', function() {
         ('#nav-input,#nav-close').toggleClass('checked');
         document.getElementById("nav-input,nav-close").style.display ="none";
      })
    });

試したこと

JavaScriptを調べて試してみたのですが、メニューが閉じても再度開けなくなったりして
わからなくなってしまいました。

Comments

[kei344]

試されたJavaScriptを質問文に追記してください。

[cinnamonbunny]

消してしまったため、あやふやなのですが追記しました。

Answer 1

こうではないでしょうか。

$(function(){
  $('#nav-content a').on('click', function() { // 修正しました
    $('#nav-input').prop('checked', false);
  })
});
```**動くサンプル：**[https://jsfiddle.net/pq15hmzu/](https://jsfiddle.net/pq15hmzu/)

---

【jQuery でのチェックボックスの操作と、チェック状態の取得 | WWWクリエイターズ】
[http://www-creators.com/archives/4479](http://www-creators.com/archives/4479)

Comments

[cinnamonbunny]

ページ内リンクには問題なく飛ぶのですが、そちらを入力してもメニュー開いたままになります。

[kei344]

ミスがあったため修正しました。jQuery が読み込まれている環境であれば動くと思います。

[cinnamonbunny]

希望通りに動きました！
昨日から悩んでいたためとても助かります。
的確で素早い回答ありがとうございました。

[x_x]

'#nav-content a' だし、$も抜けているかと

[kei344]

To: x_xさん
修正済みだと思うのですが、反映されていませんか？

[x_x]

更新前見てました。
反映遅いみたいです

[x_x]

直前にリロードしたんですけどね……