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

コード

<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は問題なく動いているのでどこかでコーディングが間違っているかと思うのですが、自分ではわからないので質問させて頂きました

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