ページ内リンクを押したときにハンバーガーメニューを閉じたい

Question

ハンバーガーメニュー内のページ内リンクをクリックした時に、リンク先までスライドして、ハンバーガーメニューを閉じたいです。
今までと同じコードを使用しているはずなのですが、うまく実装されません。
スペルなど確認しましたが、わかりませんでした。
どこが原因でしょうか。

<header>
  <h1 class="site-title">
    <a href="./nmt.html">
      <img src="img/site-logo.png" class="logo" alt="ロゴ">
    </a>
  </h1>

  <!-- ハンバーガーメニュー部分 -->
<div class="drawer" id="burger">

  <!-- ハンバーガーメニューの表示・非表示を切り替えるチェックボックス -->
  <input type="checkbox" id="drawer-check" class="drawer-hidden" >

  <!-- ハンバーガーアイコン -->
  <label for="drawer-check" class="drawer-open" id="click">
    <span></span>
    <p class="menu color" id="icon" >menu</p>
  </label>

  <!-- メニュー -->
  <nav class="drawer-content">
    <ul class="drawer-list" id="humber">
      <li>
        <img src="img/simbol-logo.png" ait="ロゴ">
      </li>
      <li class="drawer-item">
        <a href="#about-us" style="text-decoration:none;">About</a>
      </li><!-- /.drawer-item -->
      <li class="drawer-item">
        <a href="#contents" style="text-decoration:none;">Contents</a>
      </li><!-- /.drawer-item -->
      <li class="drawer-item">
        <a href="#topics"  style="text-decoration:none;">Topics</a>
      </li><!-- /.drawer-item -->
      <li class="drawer-item">
        <a href="#contact" style="text-decoration:none;">Contact</a>
      </li><!-- /.drawer-item -->
    </ul><!-- /.drawer-list -->
  </nav>
  <span class="burger-musk" id="musk"></span>
</div><!--drawer-->

</header>

<div class="contents">
<div class="first">
  <div class="company">
    <div class="copy-size">
      <p class="copy">デザインで人を笑顔にする会社<br>DIGSMILE INC.</p>
       <h1 class="copy design">DESIGN<br>FOR<br>SMILE</h1>
    </div>
  </div>
</div><!--first-->
</div><!--contents-->

header {
  height: 60px;
  width: auto;
  position: absolute;
}

.logo {
  margin-left: 50px;  
}

.contents {
  height: 90%;
}
/*ファーストビュー*/
.contents {
  height: 100%;
}

.first {
  height: 100%;
  background-image: url(img/kv-img.png);
  height: 90%;
  width: 80%;
  background-size: cover;
  z-index: 5;
  padding: 0;
  margin: 0;
}

.first::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #222;
  width: 50%;
  height: 100%;
  z-index: -1;
}

/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 60px;
  width: 15%;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
  float: right;
  z-index: 100;
  position: fixed;
  top: 0px;
  right: 0px;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}
/* メニューのデザイン*/
.drawer-content {
  width: 30%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgba(12, 12, 12, 0.911);
  transition: .5s;
  text-align: center;
  padding-top: 100px;
}

.drawer-content ul {
  list-style: none;
}

.drawer-content a {
  color: white;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 70%;/* メニューを画面に入れる */
}
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}
/*ハンバーガーメニュー*/
.drawer-open span,
.drawer-open span::before,
.drawer-open span::after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}

.drawer-item {
  font-size: 30px;
  padding-bottom: 40px;
}

.drawer {
  display: block;
}

.burger-musk {
  background-color: rgba(56, 56, 56, 0.603);
  width: 100%;
  height: 100%;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  z-index: 50;
  display: none;
}

.drawer-open.change span,
.drawer-open.change span:before,
.drawer-open.change span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #222;
  transition: 0.5s;
  position: absolute;
}
.drawer-open .change {
display: flex;
height: 60px;
width: 15%;
justify-content: center;
align-items: center;
position: relative;
z-index: 100;/* 重なり順を一番上に */
cursor: pointer;
float: right;
z-index: 100;
position: fixed;
top: 0px;
right: 0px;
}

body.nonscroll {
  overflow: hidden;
}
.menu {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
  float: right;
  margin-left: 100px;
  padding-top: 0;
  font-family: 'arial black';
}
.color {
  color:#fff!important;
}
.copy {
  color: #fff;
  display: block;
  margin-bottom: 10px;
}

.copy-size p {
  padding-bottom: 10px;
  font-size: 20px;
}

.design {
  font-family: 'arial black';
  margin-top: 0;
  font-size: 80px;
}

.company {
  z-index: 100;
  padding-top: 180px;
  margin-right: -180px;
  display: flex;
  justify-content: flex-end;
}

.company h1 {
  font-size: 70px;
}

/*スクロールで色変更*/
jQuery(window).on('scroll', function () {
  var imgHeight = $('.contents').outerHeight();

  /*色変更*/
  if (imgHeight < jQuery(this).scrollTop()) { /*背景の下に来たとき*/
    $('.menu').removeClass('color');/*menuを黒に*/
    $('.menu').css('color','#222')
    $('.drawer-open').addClass('change');/*ハンバーガーメニューを黒に*/
  } else {
     jQuery('.menu').addClass('color'); /*menuを白に*/
     $('.drawer-open').removeClass('change');/*ハンバーガーメニューを白に*/
    }  
})

$(function(){
  var imgHeight = $('.contents').outerHeight();
   $('.drawer-open').on('click',function(){
     if($(window).scrollTop()<imgHeight-50){/*ハンバーガーメニューが黒より上*/
      $('.burger-musk').fadeToggle(300);
      $('body').toggleClass('nonscroll');/*ハンバーガーメニュー開いたときスクロールしない*/
    }else {/*ハンバーガーメニューが黒より下*/
       $(this).toggleClass('change');/*メニューを黒白に変化*/
       $('.burger-musk').fadeToggle(300);
       $('body').toggleClass('nonscroll');/*ハンバーガーメニュー開いたときスクロールしない*/
       $('.menu').toggleClass('color');
      }
   })
  })
  if(('.drawer-open p').hasClass('color')){
    $('.menu').css('color','#fff');
  }

  $(function(){
    $('a[href^="#"]').click(function(){
      var speed = 1000;
      var href= $(this).attr('href');
      var target = $(href == "#" || href == "" ? 'html' : href);
      $("html, body").animate(
          {scrollTop: target.offset().top}, speed, "swing");
      return false;
    });
  });
  $('#humber a[href]').on('click', function(event) {
    $('.drawer-open').trigger('click');
  });

Answer 1

$ が足らない。

-  if(('.drawer-open p').hasClass('color')){
+  if($('.drawer-open p').hasClass('color')){
    $('.menu').css('color','#fff');
  }

Comments

[azaz_wb]

見落としていました。
ありがとうございます。