【jQuery・ハンバーガーメニュー】 閉じるボタン（X）を、元のハンバーガーボタン（三本線）に戻したいです

Question

①実現したいこと

【jQuery・ハンバーガーメニュー】 閉じるボタン（X）を、元のハンバーガーボタン（三本線）に戻したいです

②状況の説明

jQueryでハンバーガーメニューを実装しています。
スマホナビが開いている状況で、リンクをクリックすると、
・スマホナビが閉じて
・リンク先のセクションにスムーススクロールされます

ここまでは良いのですが、
閉じるボタン（X）が、元のハンバーガーボタン（三本線）に戻らない問題を解決できません。

アドバイス頂けましたら幸いです。
よろしくお願いいたします。

③該当のソースコード

  //◆ハンバーガーメニュー◆
  $('.js-hamburger').on('click',function() {
    if ($('.js-hamburger').hasClass('is-open')) {
      $('.js-drawer-menu').fadeOut();
      $(this).removeClass('is-open');
    } else {
      $('.js-drawer-menu').fadeIn();
      $(this).addClass('is-open');
    }
  });

  //spナビのリンクをクリックしたら
  $('.sp-nav__item').on('click',function() {
    $('.js-drawer-menu').fadeOut();
    $('js-hamburger').removeClass('is-open');
  });

<header class="header">
    <div class="header__inner">
      <h1 class="header__logo">
        <a href="index.html" class="logo">
          <img src="images/CodeUps.png" alt="ロゴ画像">
        </a>
      </h1>

      <!-- ハンバーガーボタン -->
      <button class="header__hamburger hamburger js-hamburger">
        <span></span>
        <span></span>
        <span></span>
      </button>

      <!-- SPナビ -->
      <div class="header__sp-nav js-drawer-menu">
        <ul class="sp-nav__items">
          <li class="sp-nav__item"><a href="index.html">トップ</a></li>
          <li class="sp-nav__item"><a href="#news">お知らせ</a></li>
          <li class="sp-nav__item"><a href="#content">業務内容</a></li>
          <li class="sp-nav__item"><a href="#works">品質</a></li>
          <li class="sp-nav__item"><a href="#overview">制作者の想い</a></li>
          <li class="sp-nav__item"><a href="#blog">ブログ</a></li>
          <li class="sp-nav__item"><a href="#contact">お問い合わせ</a></li>
        </ul>
      </div>

      <!-- PCナビ -->
      <div class="header__pc-nav">
        <ul class="pc-nav__items">
          <li class="pc-nav__item"><a href="#news">お知らせ</a></li>
          <li class="pc-nav__item"><a href="#content">業務内容</a></li>
          <li class="pc-nav__item"><a href="#works">品質</a></li>
          <li class="pc-nav__item"><a href="#overview">制作者の想い</a></li>
          <li class="pc-nav__item"><a href="#blog">ブログ</a></li>
          <li class="pc-nav__item pc-nav__item--white"><a href="#contact">お問い合わせ</a></li>
        </ul>
      </div>

    </div><!-- /.header__inner -->
  </header>



```css
.hamburger {
  z-index: 9999;
  @include mq(md) {
    display: none;
  }
}
.hamburger span {
  position: relative;
  display: block;
  height: rem(2);
  width: rem(22);
  background: #fff;
  transition: ease .3s;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  margin: 4px 0;
}
.hamburger span:nth-child(3) {
  top: 0;
}
//ハンバーガーメニューを開いたときにXボタンを表示
.hamburger.is-open span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  transform: translateY(-50%);
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  top: -7px;
  transform: rotate(-45deg);
}

④自分で調べたことや試したこと

⑤使っているツールのバージョンなど補足情報

Answer 1

あまり関係がないかもしれませんが気になったので参考までに。
元に戻らないということでしたら、まだクラスが付きっぱなしの可能性がありますよね。
（ディベロッパーツールにてクラスのつけ外しの挙動がどうなんでしょうか？）

//spナビのリンクをクリックしたらのこの部分
    $('js-hamburger').removeClass('is-open');
  });

CSSではhamburgerに対してis-openをつけていたようですが、
javascript内だと、js-hamburgerからremoveしていたのが気になりました。

また、参考までにですがハンバーガーメニューのクラスのつけ外しは
toggleClassやfadeToggleも良いかと思います^^

参考になれば幸いです。

Comments

[yoppy429]

お優しいご回答ありがとうございます！

ご回答いただいたことをきっかけに、15分ほどいろいろ試してみると、あることに気が付きました。

なんと、js-hamburgerの前にドットが抜けていました！

嵌ると、こうも視野が狭くなってしまうとは、
恥ずかしく、恐ろしいです・・。

ご丁寧に本当にありがとうございました。

なかなか回答がつかない中、とても嬉しかったです。

[kikuchan]

質問者様の悩みを解決出来て、私もうれしく思います。