0

実現したいこと

【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>
.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);
}

1 件の回答 1

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

ドット抜けが原因でした!

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。