ハンバーガーメニューのボタンをクリックして×にしたい

１やりたいこと
現在ハンバーガメニューを作成しようとしています。
その中でボタンの枠内にあるボタンを×にしたいのですが、ボタンが反応せず困っています。

２苦戦していること
最初は右も左もわからなかったのでサイトを参考にさせていただきながら、どうやって動いているのかを確認していました。
一部分を書き換えることでどのように動くか確認がしたかったのですが、動きがなくなってしまいました。
【具体的に変更した部分】
①bodyのすぐ下にあるdivをdiv class="hamberger-button"としたこと

②初めは
$(function() { $('div').click(function(){
と記載してあったものを
$(function() {
$('hamberger-button').click(function()

というふうにdivをhamberger-buttonに書き換えたこと
（このclassに対してfunctionをかけたいと思った為）

③やっている中でhambergerの定義をしていないと思ったのでlet hamberger = document.getElementById('hambeger-button');を追加したこと

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="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="stylesheet.css">
8    <title>Document</title>
9</head>
10<body>
11    <div class="hamberger-button">
12      <span class="bar1"></span>
13      <span class="bar2"></span>
14      <span class="bar3"></span>
15    </div>
16
17<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
18</script>
19<script src="js/practice.js"></script>
20</body>
21</html>

CSS
1.hamberger-button{
2    position: relative;
3    width: 100px;
4    height: 100px;
5    border: 10px solid #444;
6    box-sizing: border-box;
7  }
8  
9  /* 三本線のスタイルを決める */
10  span {
11    display: block;
12    width: 60px;
13    height: 10px;
14    background: #444;
15    position: absolute;
16    left: 10px;
17    transition: all 0.5s ease;
18  }
19  
20  /* 線の縦位置の調整 */
21  .bar1 { 
22    top: 12.5px;
23    background-color: blue;
24  }
25  .bar2 {
26    top: 35px;
27    background-color: yellow;
28  }
29  .bar3 {
30    bottom: 12.5px;
31    background-color: red;
32  }
33  
34  /*
35    ハンバーガーメニューがクリックされたら
36    上の線を真ん中に移動させて45℃回転
37  */
38  .bar1.open {
39    top: 35px;
40    transform: rotate(45deg);
41  }
42  /* 
43    ハンバーガーメニューがクリックされたら
44    真ん中の線は透明化して見えないようにする
45  */
46  .bar2.open { opacity: 0; }
47  
48  /*
49    ハンバーガーメニューがクリックされたら
50    下の線は真ん中に移動させて-45℃回転
51  */
52  .bar3.open {
53    top: 35px;
54    transform: rotate(-45deg);
55  }

jQuery
1let hamberger = document.getElementById('hambeger-button');
2
3$(function() {
4  $('hamberger-button').click(function() {
5    $('.bar1, .bar2, .bar3').toggleClass('open');
6  })
7});

３自分でやってみたこと
・console.logを使ってファイルが反応しているかどうかを試した
・hambeger-buttonに違うid名を設定してjQueryを書き換えた。
・ネットで動かない原因を調べた

４何が知りたいか
①どうやったらこのボタンが作動するのか。
②①のためには自分には何の知識が足りていないのか。

よろしくお願い致します。

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

回答1件

ベストアンサー

js
1//  $('hamberger-button').click(function() {
2//   ↓クラスをあらわすドットが足りない
3  $('.hamberger-button').click(function() {
4    $('.bar1, .bar2, .bar3').toggleClass('open');
5  })