

### 実現したいこと

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

### 状況の説明

jQueryでハンバーガーメニューを実装しています。  
スマホナビが開いている状況で、リンクをクリックすると、

  * スマホナビが閉じて
  * リンク先のセクションにスムーススクロールされます

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

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

[code]

          //◆ハンバーガーメニュー◆
          $('.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');
          });
    
[/code]

[code]

        <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>
    
[/code]

[code]

    .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);
    }
    
[/code]


CC BY-SA 4.0
2022-03-03T23:16:22.493
86676
2022-03-06T00:06:25.417
2022-03-04T00:19:18.053
3060
51677
question
javascript jquery
閉じるボタン（X）が、元のハンバーガーボタン（三本線）戻らない問題を解決したい

[code]

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

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


CC BY-SA 4.0
2022-03-06T00:06:25.417
86708
2022-03-06T00:06:25.417
51677
86676
answer