ハンバーガーメニュー、クリックするとメニューを閉じたい。

Question

前提・実現したいこと

ハンバーガーメニューをクリックするとメニューを閉じるようにしたい。
検索して試してみましたができませんでした。
Javascript初心者です。

教えて頂けると助かります。

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

エラーメッセージ

該当のソースコード

HTML

<div class="cP_cont"> <div class="cp_offcm01"> <input type="checkbox" id="cp_toggle01"> <label for="cp_toggle01"><span></span></label> <div class="cp_menu"> <ul id="Grnav"> <li><a href="#concept">Concept</a></li> <li><a href="#menu">Menu</a></li> <li><a href="#access">Access</a></li> <li><a href="https://www.hotpepper.jp/strJ000691781/yoyaku/">ご予約</a></li> </ul> </div> </div> </div>

css

.cP_cont {
position: fixed;
top: 3px;
right: 10px;
}
.cp_offcm01 {
display: inline-block;
}
/* menu */
.cp_offcm01 .cp_menu {
position: fixed;
top: -100vh;
left: 0;
width: 100%;
height: 100vh;
cursor: pointer;
-webkit-transition: 0.53s transform;
transition: 0.53s transform;
-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
transition-timing-function: cubic-bezier(.38,.52,.23,.99);
background-color: #a0522d;
opacity: 0.8;
}
.cp_offcm01 .cp_menu ul {
margin: 0;
padding: 0;
}
.cp_offcm01 .cp_menu li {
list-style: none;
}
.cp_offcm01 .cp_menu li a {
display: block;
padding: 20px;
text-decoration: none;
color: #ffffff;
border-bottom: 1px solid #ffffff;

}

.cp_offcm01 #cp_toggle01 {
position: absolute;
display: none;
opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
-webkit-transform: translateY(100vh);
transform: translateY(calc(100vh + 1rem + 25px + 1rem));
}

.cp_offcm01 #cp_toggle01 ~ label::before {
font-family: 'FontAwesome';
content: '\039e';
color: #fff;
font-size: 2em
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
content: '\02715';
}

JS

$('#Grnav a[href]').on('click', function(event) {
$('.cP_cont').trigger('click');
});

試したこと

背景画像をレスポンシブ化にする方法を試みましたが、できませんでした。

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

ここにより詳細な情報を記載してください。

Answer 1

'.cP_cont' ではなく、'#cp_toggle01'でしょう。
CSS で作られているので .prop() のほうがわかりやすいかもしれません。

  //$('#cp_toggle01').trigger('click');
  $('#cp_toggle01').prop('checked', false);

Comments

[NireiMiyu]

ご回答ありがおとうございます。
ご指摘して頂いたとおりに記述したのですが、メニューをクリックしてもハンバーガーメニューは表示のままでした(>_<)

[x_x]

提示コードのみではこれで動いているので、提示されていないところに問題があるのかもしれません。

[NireiMiyu]

＄（function）~が抜けており、入れたら無事に動くことができました！
とても助かりました！本当にありがとうございました！☺