ハンバーガーメニュー開閉しない

Question

実現したいこと

ハンバーガーメニューの実装

前提

発生している問題・エラーメッセージ

以下の動くWEBデザインのアイデア帳のハンバーガーメニューを参考に
ハンバーガーを組んだのですが、開閉しません。
検証モードでopenbtn1をクリックすると、一瞬色が変わるのですがクラスactiveは追加されません。
クラス名がつきそうに光るのに、反応はないです…打ち消されているみたいな動きです。

https://coco-factory.jp/ugokuweb/move01/5-2-1/

該当のソースコード

<div class="header_sp">
        <h1>
            <a href="<?php echo home_url(); ?>">
                <p>キノマド</p>
                <img src="<?php echo get_template_directory_uri(); ?>/img/common/logo.png" alt="">
            </a>
        </h1>
        <!-- <div class="toggle"> -->
            <div class="openbtn1"><span></span><span></span><span></span></div>
        <!-- </div> -->
        <div class="header_sp_nav">
            <div class="header_sp_nav_inner">
                <ul class="nav_sp">
                    <li><a href="<?php echo home_url(); ?>/archives/news/">NEWS</a></li>
                    <li><a href="<?php echo home_url(); ?>/topics/">TOPICS</a></li>
                    <li><a href="<?php echo home_url(); ?>/#sec_schedule">SCHEDULE</a></li>
                    <li><a href="<?php echo home_url(); ?>/event/">EVENT</a></li>
                    <li><a href="<?php echo home_url(); ?>/archives/films">FILMS</a></li>
                    <li><a href="<?php echo home_url(); ?>/#sec_about">ABOUT</a></li>
                    <li><a href="<?php echo home_url(); ?>/#sec_contact">CONTACT</a></li>
                    <li>
                        <ul class="nav_sp_sns">
                            <li><a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/common/sns_fb.png" alt=""></a></li>
                            <li><a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/common/sns_inst.png" alt=""></a></li>
                            <li><a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/common/sns_tw.png" alt=""></a></li>
                            <li><a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/common/sns_mail.png" alt=""></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

$(document).ready(function () {
    $(function () {
        $(".openbtn1").click(function () {
            $(this).toggleClass("active");
        });
    });
});

.openbtn1 {
    position: relative; /*ボタン内側の基点となるためrelativeを指定*/
    // background: #fff;
    cursor: pointer;
    width: 80px;
    height: 80px;
    top: 0px;
}
span {
    display: inline-block;
    transition: all 0.4s; /*アニメーションの設定*/
    position: absolute;
    left: 22px;
    height: 3px;
    border-radius: 2px;
    background: black;
    width: 45%;
}
.openbtn1 span:nth-of-type(1) {
    top: 24px;
}
.openbtn1 span:nth-of-type(2) {
    top: 36px;
}
.openbtn1 span:nth-of-type(3) {
    top: 49px;
}
/*activeクラスが付与されると線が回転して×に*/
// }
.openbtn1.active {
    background: transparent;
}
.openbtn1.active span:nth-of-type(1) {
    top: 31px;
    left: 26px;
    transform: translateY(6px) rotate(-45deg);
    width: 45%;
}
.openbtn1.active span:nth-of-type(2) {
    opacity: 0; /*真ん中の線は透過*/
}
.openbtn1.active span:nth-of-type(3) {
    top: 44px;
    left: 26px;
    transform: translateY(-6px) rotate(45deg);
    width: 45%;
}

.header_sp_nav {
    display: none;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    position: absolute;
    right: 0;
    top: 90px;
    &.active {
        display: block;
    }
}
.header_sp_nav_inner {
    padding: 40px;
}
.nav_sp {
    transition: 0.3s all ease;
    a {
        font-size: 2rem;
        margin-bottom: 20px;
        display: block;
        text-decoration: none;
        display: block;
        margin-bottom: 7px;
        color: #000;
        transition: 0.3s all ease;
        font-family: "Oswald", sans-serif;
        &::viseited {
            color: #000;
        }
        &:hover {
            text-decoration: underline;
        }
    }
}

.nav_sp_sns {
    display: flex;
    justify-content: space-between;
    width: fit-content;
    gap: 5px;
    margin: 40px 0;
    li {
        display: flex; /* 追加 */
        align-items: center; /* 追加 */
        width: 30px;
        height: 30px;
        background: #222;
        border-radius: 4px;
        transition: 0.3s all ease;
        margin-right: 20px;
        text-align: center;
        a {
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            text-align: center;
            padding: 2px;
            width: 100%;
            margin-bottom: 0;
            img {
                height: 20px;
            }
        }
        &:hover {
            transform: scale(1.1);
        }
    }
}

試したこと

・toggleClassは反応しないのですが、
addClassでactiveは追加されました。
・検証モードでactiveを追加するとcssは反映されます。

補足情報（FW/ツールのバージョンなど）

9月21日22時40分
ご回答いただいたコードで修正→変化なし
コピペで実装できる他のハンバーガーメニューを実装→反応せず
jQueryを使わないコードに書き換え→変化なし
ハンバーガーの位置を変更→変化なし
別の媒体で検証→変化なし

ほかに検証すべきことがわかる方いましたらお願いいたします。

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、クリックすると .openbtn1 に .active がつき、ハンバーガーメニューが×印になりました。ですので、問題が再現しません。

[shinoharat]

toggleClass が呼ばれていないのか、それとも2回呼び出されたせいで元に戻っているのかの切り分けがしたいです。

$(this).toggleClass("active");

の直後に

console.log("----- toggle!! -----");

みたいなコードを書くと、ログはどんな感じででますか？

[pecmm]

問題点が若干不明瞭なんですが、「開閉しません」というのは
『openbtn1ボタンにactiveクラスが付与されず、見た目が変化しない』という意味ですか？
それとも『header_sp_nav辺りのメニューが表示されない』という話ですか？

現状のコードでは
1. ユーザがopenbtn1ボタンをクリックする
2. ボタンのactiveクラスがtoggleし、ボタンの見た目が変化する
…というのは書いてある通りに正常に実行されそうな気がします。

もしopenbtn1ボタンのtoggleがうまくいかないという話であれば、
検証環境を詳細に書いた方がよりよい回答が得られるかもしれません

[xxxxx417]

すみません、初めてこのサイトを使うもので、こちらに質問いただいているのに気がつきませんでした。

>Lhankor_Mhyさん
お試しありがとうございます。私も別の環境で試すとうまくいきました。

>shinoharatさん
記載すると、consoleに表示されました。

>pecmmさん
『openbtn1ボタンにactiveクラスが付与されず、見た目が変化しない』という意味の方です。

他サイトで動いているコードを持ってきて検証してみました
クラス名などもそっくり持ってきて、そのサイトで使用されていた以下のようなコードを試すと、
toggleClassは全て反応せず、if内だけ反応しました。
$(function () {
var state = false;
$('#btn').on('click', function () {
$('.header_toggle').toggleClass('open');
$('.toggle_title').toggleClass('open');
$('.sp_only_nav').toggleClass('open');
$('html,body').toggleClass('noscroll');
if (state == false) {
$('.toggle_title').text('CLOSE');
state = true;
} else {
$('.toggle_title').text('MENU');
state = false;
}
return false;
});
});
});
現在のサイトもtoggleClass部分をaddClassに変更すると動作します。
Macbook Chrome、Safari、iphoneSE Safari、Chromeでダメでした。
テスト環境で公開しているので、こちらに記載しても大丈夫か確認してみます。

Answer 1

コードについて

現状提示されているコードでは、特に問題なくtoggleClassが実行されそうです。
ただ、htmlの中にPHPの断片が見えることなどから、実際に手元で検証されているコードとは別物なのではないでしょうか。
もしそうであれば、本当に動作しているコードを見てみないことにはこれ以上はなんとも言えないです。
(「ちゃんと動きそうなのに」以外の回答は難しそうです)

想像できる原因

あくまで可能性ですが、本当に動作しているコードでは何らかの手段でクリックイベントを二重に登録している説があります。
そうであれば
「検証モードでopenbtn1をクリックすると、一瞬色が変わるがクラスactiveは追加されない」
「toggleClassは(一見)動作しないが、addClassは動作する」
「ログ出力を追加するとconsoleに表示される」
どれも矛盾なく説明できます。

console出力ですが、最近の開発者コンソールは「全く同じ出力が連続した場合、表示は1回のみで横に出力された回数が表示される」ような挙動のものが多いです。
ですので1回ボタンクリックで実は2回出力されており、以降クリックごとに 4→6→8…とカウントアップしていくような挙動であれば、二重登録が原因でしょう。

些細な指摘

(若干今更ですが)
ソースコードを提示する場合は、言語の種類ごとにマークダウンを分ける＆言語も指定すると把握し易いです。
質問の編集で </> マークのボタン(コードの挿入) で、バッククォート3連直後の「ここに言語を入力」のテキストを html とか css とかに書き換えると、そこで指定した言語に合わせてハイライトが付きます。

Comments

[xxxxx417]

pecmmさん

ご回答ありがとうございます！
ご指摘のとおり、二重に読み込まれているせいでtoggleが打ち消されているのが原因でした。

今回初めて自力でWordPressのテーマを作成していたのですが、いろんな場所から参考コードを持ってきた結果、
function.phpにも読み込みコードを書き、footerにも同じものを書いていました。
そのせいで二重に読み込まれてしまったようでした。
よく見るとconsoleにもcommon.jsとcommon.js???ver01のようなjs由来で二重に記載されていたのですが、2回読み込んでいるという概念がなくて見落としていました。

なぜ動かないのか本当に本当に困っていたので、本当に大変助かりました。感謝申し上げます！！
ソースコードについてもご指摘ありがとうございます。
今後も質問投稿するかと思うので、ご指摘のやり方で修正してみました。
こうやってやるんですね、勉強になりました。

Answer 2

$(document).ready( ... ) が2重になっているせいで、「準備が完了したら準備完了を待つ」みたいなコードになっていると思います。

  // 修正前
  // １つめのready
  $(document).ready(function () {
      // ２つめのready
      $(function () {
          // click時の処理を登録
          $(".openbtn1").click(function () {
              $(this).toggleClass("active");
          });
      });
  });

以下のように外側の ready を消してみてください。

  // 修正後
  // １つめのready
  $(function () {
      // click時の処理を登録
      $(".openbtn1").click(function () {
          $(this).toggleClass("active");
      });
  });

Comments

[xxxxx417]

shinoharatさん

ご回答ありがとうございます。
訂正してみましたが、残念ながらやっぱり動きませんでした…；；
読み込みもされているようです。