ハンバーガーメニューをクリックしたときに、表示したいリストが表示されない

引用テキスト### 前提・実現したいこと

（例）HTML,CSS,JQueryでハンバーガーメニューを作ろうとしています。
ハンバーガーメニューをクリックした時に表示したいリスト(特徴、価格、お問合せ)が表示されないので困っております。以下に試してみたソースコードを添付します。sliderを読み込んでいますが、これはmainタグ内で使っているもので、今回、mainタグ内は質問内容に関係ないものだと思い、省略しています。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="robots" content="noindex">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="./css/reset.css">
9    <link rel="stylesheet"　type="text/css"　href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
10    <link　rel="stylesheet"　type="text/css"　href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
11    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
12    <link rel="stylesheet" href="./css/style.css">
13    <title>ハンバーガーメニュー</title>
14</head>
15<body>
16    <header class="header">
17        <div class="container ">
18            <div class="header-wrapper">
19                <div class="site-title">
20                    <img src="./img/logo.png" alt="">
21                    <h1 style="margin-left: 1.6rem;">ハンバーガー</h1>
22                </div>
23                <div class="nav-wrapper">
24                    <nav class="header-nav">
25                        <ul class="nav-list">
26                            <li class="nav-item"><a href="#feature">特徴</a></li>
27                            <li class="nav-item"><a href="#price">価格</a></li>
28                            <li class="nav-item"><a href="#contact">お問合わせ</a></li>
29                        </ul>
30                    </nav>
31                </div>
32                <div class="header-right">
33                    <a href="#contact"><button class="btn"> お問い合わせ</button></a>
34                </div>
35                <div class="burger-btn"><!-- ③ハンバーガーボタン -->
36                    <span class="bar bar_top"></span>
37                    <span class="bar bar_mid"></span>
38                    <span class="bar bar_bottom"></span>
39                </div>
40            </div>
41        </div>
42    </header>
43    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
44    <script src="./js/script.js"></script>
45</body>
46</html>

css
1.container{
2    max-width: 102.2rem;
3    margin: 0 auto;
4    width: 100%;
5}
6.btn{
7    color: #fff;
8    background: blue;
9    padding: 1.1rem 3.5rem;
10    border-radius: 1rem;
11    box-shadow: 0 0.3rem 0.6rem #00000029;
12}
13.header{
14    height: 10rem;
15    box-shadow: 0px 3px 6px #00000029;
16    color: #333;
17    position: fixed;
18    width: 100%;
19    background-color: #fff;
20    z-index: 1;
21}
22
23.header-wrapper{
24    display: flex;
25    justify-content: space-between;
26    align-items: center;
27    padding-top: 2.4rem;
28
29}
30.site-title{
31    display: flex;
32    align-items: center;
33    font-size: 2.4rem;
34    font-weight: bold;
35}
36.site-title img{
37    width: 4.7rem;
38    display: block;
39}
40.nav-list {
41    display: flex;
42}
43.nav-item{
44    margin-right: 4.6rem;
45}
46.burger-btn{
47    display: none;
48}
49
50@media screen and (max-width:768px){
51    .header{
52        padding: 0 5%;
53    }
54    .burger-btn{
55        display: block;
56        width: 39px;
57        height: 39px;
58        position: relative;
59        z-index: 3;
60        background-color:transparent;
61        border:none;
62    }
63    .bar{
64        width: 20px;
65        height: 1px;
66        display: block;
67        position: absolute;
68        left: 50%;
69        transform: translateX(-50%);
70        background-color:#1B1310;
71    }
72    .bar_top{
73        top: 10px;
74    }
75    .bar_mid{
76        top: 50%;
77        transform: translate(-50%,-50%);
78    }
79    .bar_bottom{
80        bottom: 10px;
81    }
82    .burger-btn.close .bar_top{
83        transform: translate(-50%,10px) rotate(45deg);
84        transition: transform .3s;
85    }
86    .burger-btn.close .bar_mid{
87        opacity: 0;
88        transition:opacity .3s;
89    }
90    .burger-btn.close .bar_bottom{
91        transform: translate(-50%,-8px) rotate(-45deg);
92        transition: transform .3s;
93    }
94    .nav-wrapper{
95        display: none;
96        width: 100vw;
97        height: 100vh;
98        position: fixed;
99        top: 0;
100        left: 0;
101        z-index: 2;
102    }
103    .header-nav{
104        width: 100%;
105        height: 100%;
106        background-color:#1B1310;
107        z-index: 2;
108    }
109    .header-nav .nav-list{
110        display: block;
111        position: absolute;
112        top: 50%;
113        left: 50%;
114        transform: translate(-50%,-50%);
115        text-align: center;
116
117    }
118    .header-nav .nav-item{
119        margin-right: 0;
120        margin-bottom: 40px;
121    }
122    body.noscroll{
123        overflow: hidden;
124    }
125    .header-right{
126        display: none;
127    }
128    .header{
129        display: flex;
130        width: 100%;
131    }
132    
133    .site-title img{
134        width: 2.5rem;
135    }
136
137}

JQuery
1$('.burger-btn').on('click',function(){
2    $('.burger-btn').toggleClass('close');
3    $('.header-nav').fadeToggle(500);
4    $('body').toggleClass('noscroll');
5});
6

試したこと

クリスタさんのサイト
「【コピペでできる！】jQueryを使用したハンバーガーメニューの作り方」を参考に作成しましたが、リストが表示されません。

K_3578

2021/03/10 07:34

teratailではURLは「リンクの挿入」を押して出てくる形[リンク先の内容](URL) で提示してください。質問は編集できますので。

teratail314

2021/03/10 07:59

返信ありがとうございます。リンクの挿入をしました。

K_3578

2021/03/10 08:01

@質問者さん編集有難いのですがリンク2重になってるのでそれだけ消しといてくれるともっと助かります･･･。

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

回答1件

ベストアンサー

とりあえず、こうしてみてはどうでしょうか。

js
1$('.burger-btn').on('click', function () {
2    $('.burger-btn').toggleClass('close');
3//    $('.header-nav').fadeToggle(500);
4    $('.nav-wrapper').fadeToggle(500);
5    $('body').toggleClass('noscroll');
6});