Jquery toggleclassが付与されない（初心者です）

Question

コード

<header> <div class="header-logo"> <img class="header-img" src="image/header-img.png" alt="header-img"> <a href="#"> <h1 class="header-title">ReBuild</h1> </a> </div> <div class="header-nav pc-only"> <nav> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </nav> </div> <div class="sp-menu sp-only"> <div class="humburger-btn"> <span></span> <span></span> </div> <nav class="humburger-menu"> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </nav> </div> </header>

$(function () {
$('humburger-btn').on('click',function () {
$('humburger-menu').toggleclass('show')
})
})

@media (max-width: 599px) {
.pc-only {
display: none;
}
.sp-only {
display: block;
}
h3 {
font-size: 45px;
}
h4 {
font-size: 30px;
}

header {
  width: 93%;
  height: 60px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
    .header-title {
      font-size: 22px;
    }
}
.humburger-btn span {
  display: block;
  background-color: #000;
  width: 40px;
  height: 4px;
  margin: 8px 0;
  border-radius: 10px;
  :hover {
    cursor: pointer;
  }
}
.humburger-menu {
  position: fixed;
top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  text-align: center;
  display: none;
  z-index: -1;
  li {
    margin: 120px 0;
    a {
      font-size: 40px;
      font-weight: 700;
      :hover {
        cursor: pointer;
      }
    }
  }
}
.humburger-menu.show {
  display: block;
}

}

レスポンシブ化をする際にハンバーガーメニューを作成していましたが、ハンバーガーメニューをクリックしても反応しません。デベロッパーツールで見てみると、toggleClassによってクラスが付与されていません。

スライダーなどの他のjqueryは問題なく動いているのでどこかでコーディングが間違っているかと思うのですが、自分ではわからないので質問させて頂きました

足りない情報等ございましたら随時追加していきますのでよろしくお願いいたします

Comments

[yambejp]

きちんとマークダウンされていません

Answer 1

toggleClass()、Cは大文字です。
.toggleClass() | jQuery API Documentation

htmlの全貌が見えない一部のソースのように見えますので、ひとまず、
The W3C Markup Validation Service
にhtmlコードを貼り付けて、文法ミスがないかチェックしてみてください。

そのうえで、webブラウザのデベロッパーツールでコンソールにエラーメッセージが出力されているかどうかなど点検しましょう。