ハンバーガーメニュー/×押したときも黒い背景を消したい

Question

ハンバーガーメニューでメニューを押すと薄い黒背景が出てメニュー外でも閉じるように実装したのですが、×印を押した時だけ黒背景だけ消えてくれません。ググりいろんな方の参考にやってみたのですが思うような挙動にならず苦戦しています。ご教授いただけないでしょうか。

<!-- burger-btn -->
      <div class="overlay"></div>
      <button class="p-burger__btn">
        <div class="p-burger__open-btn">
          <span class="bar p-burger__top"></span>
          <span class="bar p-burger__midl"></span>
          <span class="bar p-burger__bottom"></span>
        </div>
      </button><!-- //burger-btn -->

// burger-btn
.p-burger__btn {
  display: none;
  @include tab {
    display: block;
    position: relative;
    background: $sub_color;
    cursor: pointer;
    width: 40px;
    height: 35px;
    border-radius: 5px;
    margin-left: auto;
    z-index: 1000;
    
    .p-burger__open-btn {
      transition: all 0.4s;
    }

    .bar {
      display: block;
      height: 3px;
      width: 50%;
      left: 10px;
      background-color: $base_color;
      transition: all 0.4s;
      position: absolute;
      border-radius: 2px;
    }
    .p-burger__top {
      top: 7px;
    }
    .p-burger__midl {
      top: 15px;
    }
    .p-burger__bottom {
      top: 23px;
    }
  }
}

.p-burger__btn.close  .p-burger__top{
  top: 8px;
  left: 10px;
  transform: translateY(6px) rotate(-135deg);
  width: 50%;
}
.p-burger__btn.close .p-burger__midl{
  opacity: 0;
}
.p-burger__btn.close .p-burger__bottom {
  top: 20px;
  left: 10px;
  transform: translateY(-6px) rotate(135deg);
  width: 50%;
}

.fexed {
  position: fixed;
}

.p-header__nav {
  @include tab {
    background: $sub_color;
    position: fixed;
    width: 60%;
    height: 100vh;
    z-index: 999;
    top: 0;
    right: -120%;
    transition: all 0.6s;
    opacity: .9;
  }
  &.close {
    right: 0;
  }
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
}

$(".p-burger__btn").click(function () {
  $(this).toggleClass('close');
  $(".p-header__nav").toggleClass('close');
  $('body').toggleClass('fexed');
  $('.overlay').fadeIn();
});

$(".overlay,.p-header__nav").click(function () {
  $("body").removeClass("fexed");
  $(".p-burger__btn").removeClass('close');
  $(".p-header__nav").removeClass('close');
  $('.overlay').fadeOut();
});

Comments

[Lhankor_Mhy]

『×印』とは、ご提示のHTMLでいうと、どの要素ですか？
p-burger__btn でしょうか。

[sakura-h]

説明不足で申し訳ありませんm(_ _)m

はい、htmlのp-burger__btnが×印になります。

Answer 1

SCSSがコンパイルできないので、推測の回答になりますが。
以下のように変更すると、どうでしょうか？

//$('.overlay').fadeIn();
$('.overlay').fadeToggle();

Comments

[sakura-h]

一発でできました！！
本当にありがとうございました、助かりました。

[Lhankor_Mhy]

お役に立てたようで何よりです。