jQueryのtoggleClassについて（ドロワーの実装）

Question

実現したいこと

ドロワーメニューの実装

前提

jQueryを使用して、ドロワーのアイコン(drawer-icon)をクリックするとメニューが開き、
再びアイコン、もしくはメニュー（drawer-item）をクリックするとメニューが閉じてアイコンも元に戻るように実装したいです。

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

該当の要素をクリックすると、ドロワーが開きません。検証ツールで確認したところ、クリックした要素は反応しているようですが、jQueryで指定したtoggleClassのopenというクラスが付与されていませんでした。
エラーメッセージは出ていません。

該当のソースコード

            <div id="js-drawer-icon" class="drawer-icon">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <nav id="js-drawer-menu" class="drawer-menu">
                <ul class="drawer-menu-items">
                    <li class="drawer-item menu-item"><a href="#service">サービス</a></li>
                    <li class="drawer-item menu-item"><a href="#flow">流れ</a></li>
                    <li class="drawer-item menu-item"><a href="#works">実績</a></li>
                </ul>
            </nav>

.drawer-icon{
    display: none;
    span{
        position: absolute;
        display: inline-block;
        height: 2px;
        width: 30px;
        background: #078080;
        left: 0;
        transition: all 0.3s;
    }
    @include mq('sp'){
        display: block;
        position: fixed;
        z-index: 120;
        top: 14px;
        right: 10px;
        width: 30px;
        height: 30px;
    }
}
.drawer-icon span:nth-of-type(2){
    top: 10px;
}
.drawer-icon span:nth-of-type(3){
    top: 20px;
}
.drawer-icon.open span:nth-of-type(1){
    top: 10px;
    transform: rotate(-45deg);
    transition: all 0.3s;
}
.drawer-icon.open span:nth-of-type(2){
    display: none;
    transition: all 0.3s;
}
.drawer-icon.open span:nth-of-type(3){
    top: 10px;
    transform: rotate(45deg);
    transition: all 0.3s;
}
.drawer-menu{
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0.9;
    width: 100%;
    height: 100vh;
    transition: all 0.3s ease;
    transform: translateY(-100%);
    &.open{
        transform: translateY(0);
    }
}
.drawer-menu-items{
    text-align: center;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.drawer-item{
    margin-top: 2em;
}

jQuery(document).ready(function() {
    // ページ内スクロール
    jQuery('a[href^="#"]').click(function() {
        const speed = 600;
        let headerHeight = jQuery('header').outerHeight();
        let href = jQuery(this).attr("href");
        let target = jQuery(href == "#" || href == "" ? "html" : href);
        let position = target.offset().top - headerHeight;
        jQuery("body,html").animate({ scrollTop: position }, speed, "swing");
        return false;
    });
    // ハンバーガーメニュー
    jQuery("#js-drawer-icon").on('click', function(e) {
        e.preventDefault();
        jQuery("#js-drawer-icon").toggleClass("open");
        jQuery("#js-drawer-menu").toggleClass("open");
    });

    jQuery(".drawer-item.menu-item > a").click(function() {
        jQuery("#js-drawer-icon").removeClass("open");
        jQuery("#js-drawer-menu").removeClass("open");
    });
});

試したこと

・console.logで確認してみたところ、イベントは問題なく動作していました。
・クラス名の記述ミスがあるかどうか確認したのですが、そちらも問題なさそうです。
・toggleClassをaddClassに変更すると、openというクラス名が付与され動くようになりましたが、開閉できるようにしたいので、出来ればtoggleClassを使用したいです。
・jsファイルの読み込みが出来ているか確認しました。
・プラグインが何か関係しているかもと思い無効にしてみましたが改善されませんでした。

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

ワードプレスを使用しています。addClassなら動作するのに、toggleClassになると動作しない理由も知りたいです。
どなたかお力添えいただければ幸いです。どうぞよろしくお願いいたします。

Comments

[maisumakun]

> クリックした要素は反応しているようですが

どのような挙動を見てそう判断しましたか?

[arisa]

コメントありがとうございます。
検証ツールのElementsでクリックした部分の要素にライン？のような印がついたのと、クリックイベントの記述の後ろにconsole.logを記述したところ、consoleに表示されたので、反応しているのかなと思いました！あまり自信はないのですが認識あっていますでしょうか・・・。

[maisumakun]

> クリックイベントの記述の後ろにconsole.logを記述したところ、consoleに表示されたので

後ろだとイベントセット後に通っているだけということも考えられます（そして、jQueryのセレクタは空振りになっても特にエラーにはなりません）。イベントハンドラの中に書いて確認しましたか？

[arisa]

以下のように記述しました。
イベントハンドラの中に書いていると思います。
コンソールには「クリックしました」が全て表示されていました。
console.logが問題なく表示されて、エラーに出てこないということは空振りしているだけということでしょうか。どこが原因で空振りになっているのか見当がつかず・・・

jQuery("#js-drawer-icon").on("click", function(e) {
e.preventDefault();
console.log("クリックしました"); //ココに記述
jQuery("#js-drawer-icon").toggleClass("open");
console.log("クリックしました"); //ココに記述
jQuery("#js-drawer-menu").toggleClass("open");
console.log("クリックしました"); //ココに記述
});

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題なく動作しました。

SCSS のミックスインはご提示いただいていなかったので、適当に変更して試しています。
もしかすると、その辺りに違いがあるのかもしれないです。

[Lhankor_Mhy]

あとは、『toggleClassをaddClassに変更すると、openというクラス名が付与され動くように』とのことですから、イベント発火が2回行われているということを疑ってもいいかもしれません。

[arisa]

確かにconsole.logの内容が2回表示されていました。イベントが2回発火していたのが原因だったようです。
原因が分かったので色々と調べてみて、以下のコードを記述したら解決しました！

jQuery("#js-drawer-icon").off('click');

ありがとうございました！

[Lhankor_Mhy]

ご解決されて何よりです。

お手数ですが、自己解決の処理をお願いします。

Answer 1

console.logで確認したら、イベントが2回発火していたのが原因だったようです。
以下のコードを記述したら解決しました。

jQuery("セレクタ").off("イベント");