質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

scriptで追加したクラスをもう一度クリックした時に削除したいです。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 144

sasaki_0000

score 4

前提・実現したいこと

ハンバーガーメニューを作成しており、
メニューを開いている間はスクロールをさせないために、htmlタグにoverflow: hidden;を指定したクラスを追加するように指定したのですが、
メニューを閉じた時に消すという指定が初心者で分からず大変困っています。
大変お手数おかけしますが教えていただけますと幸いです。

該当のソースコード

$(function() {
         $('.navbar_toggle').on('click', function () {
          $(this).toggleClass('open');
          $('.menu-sp').toggleClass('open');
          $('html').addClass('scroll-prevent');
         });
        });
<header class="d-block d-lg-none l-header menu-bg">
    <nav>
        <div class="drawer">
            <a class="navbar_brand" href="<?php echo esc_url( home_url('') ); ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/common/images/common/logo.svg" alt=""></a>
            <div class="navbar_toggle">
            <span class="navbar_toggle_icon"></span>
            <span class="navbar_toggle_icon"></span>
            <span class="navbar_toggle_icon"></span>
            </div>
        </div>
        <div class="menu-sp">
          <ul>
            <li><a href="#"><strong>SAMPLE</strong></a></li>
            <li><a href="#"><strong>SAMPLE</strong></a></li>
            <li><a href="#"><strong>SAMPLE</strong></a></li>
            <li>
              <a href="#"><strong>SAMPLE</strong></a>
              <ul class="child-menu">
                <li><a href="#">SAMPLE</a></li>
              </ul>
            </li>
            <li>
              <a href="#"><strong>SAMPLE</strong></a>
              <ul class="child-menu">
                <li><a href="#">SAMPLE</a></li>
              </ul>
            </li>
            <li>
              <a href="#"><strong>SAMPLE</strong></a>
              <ul class="child-menu">
                <li><a href="#">SAMPLE</a></li>
                <li><a href="#">SAMPLE</a></li>
              </ul>
            </li>
            <li>
              <a href="#"><strong>SAMPLE</strong></a>
              <ul class="child-menu">
                <li><a href="#">SAMPLE</a></li>
              </ul>
            </li>
          </ul>
          <div>
            <ul class="btn-li-sp">
              <li>
                <a href="#" class="button-sp mr-3"><i class="far fa-envelope fa-lg fa-fw"></i> Request document</a>
              </li>
            </ul>
          </div>
          <div class="tel-menu-sp">
            <img src="<?php bloginfo('template_directory'); ?>/assets/common/images/common/tel-en.svg" class="w100">
          </div>
        </div>
      </div>
    </nav>
    <?php wp_head(); ?>
</header>
nav {
  width: 100%;
  height: 15vh;
  position: relative;
  background: #ffffff;
  z-index: 9999;
}

.drawer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 15vh;
  padding: 0 2em;
}

.navbar_brand {
  text-align: center;
  width: 100%;

  img{
    width: 30vw;
    margin: 0 0 0 5.5em;
  }
}

.navbar_toggle {
  z-index: 100;
  padding: 2em;
}

.navbar_toggle_icon {
  position: relative;
  display: block;
  height: 2px;
  width: 40px;
  padding: 0 1.2em;
  background: #000000;
  -webkit-transition: ease .5s;
  transition: ease .5s;

  &:nth-child(1) {
    top: 0;
  }

  &:nth-child(2) {
    margin: 8px 0;
  }

  &:nth-child(3) {
    top: 0;
  }
}

/*OPEN時の動き*/

.navbar_toggle.open .navbar_toggle_icon {
  &:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  &:nth-child(2) {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
  }

  &:nth-child(3) {
    top: -10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

.menu-sp {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: ease .5s;
  transition: ease .5s;
  background-color: #ff6347;
  height: 100vh;

  ul {
    width: 80%;
    margin: 0 auto;
    padding: 3em 0;

    li {
      padding: 1em 0;
      width: 100%;

      a {
        color: white;
        text-decoration: none;
        font-size: 1.3em;
      }

      .child-menu{
        padding: 1em 0;
        margin: 0 0 0 2em;

        li{
          padding: 0.5em 0;
          width: 100%;

          a{
            color: white;
            text-decoration: none;
            font-size: 1.1em;
          }
        }
      }
    }
  }

  &.open {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
  }
}

/*OPEN時の動き*/

@media screen and (min-width: 992px) {
  nav {
    display: flex;
    flex-direction: row;
  }

  .navbar_toggle {
    display: none;
  }

  .menu-sp {
    width: 100%;
    -webkit-transform: translateX(0);
    transform: translateX(0);

    ul {
      height: 70px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;

      li {
        padding: 0 1em;
        border-bottom: none;
      }
    }
  }
}

.tel-menu-sp{
  background-color: #ffffff;
  padding: 2em;
  width: 80%;
  margin: 0 auto 3em auto;
}

試したこと

https://qiita.com/Scheme/items/300739f6da6a95e58306
上記のサイトを参考に設定したりしてみたのですがトグルメニューを触っても反応がないなどの状態になりました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/07/09 18:49

    >sqript

    「script」かと思います。

    キャンセル

  • m.ts10806

    2020/07/09 18:50

    しかし、PHPは関係ないのでは?
    あと、HTML提示願います。
    JavaScriptだけでは動作確認できません。

    キャンセル

  • sasaki_0000

    2020/07/09 19:03

    ご指摘ありがとうございました。
    scriptの表記修正致しました。
    phpをタグ追加してしまっていた件、phpでサイトを作成していたのでどこまで関係があるのかわからず追加してしまいました。申し訳ございません。削除致しました。

    htmlとcss後ほど追記いたします。

    キャンセル

  • m.ts10806

    2020/07/10 05:39

    むしろ関係するのはWordPressでしたか。厳密には「PHPで作った」とは言えないと思います。
    あと、SCSSをそのまま提示されてもコンパイルしないといけないなど環境が必要なので、HTMLもですが、「ブラウザから利用されるソース」を提示された方がアドバイスは得やすくなるかと思います

    キャンセル

回答 2

check解決した方法

0

yambejpさまに「クラスの付け外しはできています」コメントでヒントをいただき下記のように書き換えたところ無事希望の動作になりました!ありがとうございました…!

$(function() {
         $('.navbar_toggle').on('click', function () {
          $(this).toggleClass('open');
          $('.menu-sp').toggleClass('open');
          $('html').addClass('scroll-prevent');
         });
        });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

$('.navbar_toggle')のクリックにより、自身や$('.menu-sp')のopenクラスのつけ外しはできています。
「メニューを閉じた時」とはどのことをいうのでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る