ページ内リンクでハンバーガーメニューを自動で閉じるようにしたい

ハンバーガーメニューをページ内リンクで
リンクを押した瞬間に自動で閉じるようにしたいです。

検索して上から順にやってみましたがどうしてもうまくいきません。
そしてこちらのサイトを参考にそっくりそのままコピペしてみましたがそれでも上手くいきません。

何かおかしいところはありますでしょうか？
ご教授お願い致します。

html
1<!doctype html>
2<html>
3<head>
4<link rel="stylesheet" href="test.css"/>
5<meta charset="UTF-8">
6<title>無題ドキュメント</title>
7</head>
8
9<body>
10<header>
11  <div class="header-logo-menu">
12  <div id="nav-drawer">
13      <input id="nav-input" type="checkbox" class="nav-unshown">
14      <label id="nav-open" for="nav-input"><span></span></label>
15      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
16 <div id="nav-content">ここに中身を入れる
17	<ul>
18		<li><a href="#01">コンテンツ01</a></li>
19		<li><a href="#02">コンテンツ02</a></li>
20	</ul>
21</div>
22  <div class="logo-area">LOGO</div>
23  </div>
24</header>
25<h2 id="01">コンテンツ01</h2>
26<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
27
28・
29・
30・
31・
32
33<h2 id="02">コンテンツ02</h2>
34<script>
35$(function() {
36  $('#nav-content li a').on('click', function(event) {
37    $('#nav-input').prop('checked', false);
38  });
39});
40</script>
41</body>
42</html>
43

css
1header {
2  padding:10px;
3  background: #ccc;
4}
5
6#nav-drawer {
7  position: relative;
8}
9
10/*チェックボックス等は非表示に*/
11.nav-unshown {
12  display:none;
13}
14
15/*アイコンのスペース*/
16#nav-open {
17  display: inline-block;
18  width: 30px;
19  height: 22px;
20  vertical-align: middle;
21}
22
23/*ハンバーガーの形をCSSで表現*/
24#nav-open span, #nav-open span:before, #nav-open span:after {
25  position: absolute;
26  height: 3px;/*線の太さ*/
27  width: 25px;/*長さ*/
28  border-radius: 3px;
29  background: #555;
30  display: block;
31  content: '';
32  cursor: pointer;
33}
34#nav-open span:before {
35  bottom: -8px;
36}
37#nav-open span:after {
38  bottom: -16px;
39}
40
41/*閉じる用の薄黒箇所*/
42#nav-close {
43  display: none;
44  position: fixed;
45  z-index: 99;
46  top: 0;
47  left: 0;
48  width: 100%;
49  height: 100%;
50  background: black;
51  opacity: 0;
52  transition: .3s ease-in-out;
53}
54
55/*メニューの中身*/
56#nav-content {
57  overflow: auto;
58  position: fixed;
59  top: 0;
60  left: 0;
61  z-index: 9999;
62  width: 90%;
63  max-width: 330px;/*最大幅（お好みで調整を）*/
64  height: 100%;
65  background: #fff;
66  transition: .3s ease-in-out;
67  -webkit-transform: translateX(-105%);
68  transform: translateX(-105%);
69}
70
71/*チェックがついたら表示させる*/
72#nav-input:checked ~ #nav-close {
73  display: block;
74  opacity: .5;
75}
76
77#nav-input:checked ~ #nav-content {
78  -webkit-transform: translateX(0%);
79  transform: translateX(0%);
80  box-shadow: 6px 0 25px rgba(0,0,0,.15);
81}
82
83.header-logo-menu{
84 display: flex;
85 display: -moz-flex;
86 display: -o-flex;
87 display: -webkit-flex;
88 display: -ms-flex;
89 flex-direction: row;
90 -moz-flex-direction: row;
91 -o-flex-direction: row;
92 -webkit-flex-direction: row;
93 -ms-flex-direction: row;
94}
95
96/*ロゴやサイトタイトルをセンタリング*/
97.logo-area{text-align:center;margin:auto;}

回答1件

ベストアンサー

jQueryのコードは、jQueryファイルを事前に読み込んでおかないと動きません。
下記のように、jQueryファイルを読み込んでください。

html
1<head>
2  <link rel="stylesheet" href="test.css"/>
3  <meta charset="UTF-8">
4  <title>無題ドキュメント</title>
5  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
6</head>