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

実現したいこと

ドロワーメニューの実装

前提

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

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

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

該当のソースコード

html

1 <div id="js-drawer-icon" class="drawer-icon">2 <span></span>3 <span></span>4 <span></span>5 </div>6 <nav id="js-drawer-menu" class="drawer-menu">7 <ul class="drawer-menu-items">8 <li class="drawer-item menu-item"><a href="#service">サービス</a></li>9 <li class="drawer-item menu-item"><a href="#flow">流れ</a></li>10 <li class="drawer-item menu-item"><a href="#works">実績</a></li>11 </ul>12 </nav>

sass

1.drawer-icon{2 display: none;3 span{4 position: absolute;5 display: inline-block;6 height: 2px;7 width: 30px;8 background: #078080;9 left: 0;10 transition: all 0.3s;11 }12 @include mq('sp'){13 display: block;14 position: fixed;15 z-index: 120;16 top: 14px;17 right: 10px;18 width: 30px;19 height: 30px;20 }21}22.drawer-icon span:nth-of-type(2){23 top: 10px;24}25.drawer-icon span:nth-of-type(3){26 top: 20px;27}28.drawer-icon.open span:nth-of-type(1){29 top: 10px;30 transform: rotate(-45deg);31 transition: all 0.3s;32}33.drawer-icon.open span:nth-of-type(2){34 display: none;35 transition: all 0.3s;36}37.drawer-icon.open span:nth-of-type(3){38 top: 10px;39 transform: rotate(45deg);40 transition: all 0.3s;41}42.drawer-menu{43 position: fixed;44 z-index: 10;45 top: 0;46 left: 0;47 background: #fff;48 opacity: 0.9;49 width: 100%;50 height: 100vh;51 transition: all 0.3s ease;52 transform: translateY(-100%);53 &.open{54 transform: translateY(0);55 }56}57.drawer-menu-items{58 text-align: center;59 position: absolute;60 content: "";61 top: 50%;62 left: 50%;63 transform: translate(-50%, -50%);64}65.drawer-item{66 margin-top: 2em;67}

js

1jQuery(document).ready(function() {2 // ページ内スクロール3 jQuery('a[href^="#"]').click(function() {4 const speed = 600;5 let headerHeight = jQuery('header').outerHeight();6 let href = jQuery(this).attr("href");7 let target = jQuery(href == "#" || href == "" ? "html" : href);8 let position = target.offset().top - headerHeight;9 jQuery("body,html").animate({ scrollTop: position }, speed, "swing");10 return false;11 });12 // ハンバーガーメニュー13 jQuery("#js-drawer-icon").on('click', function(e) {14 e.preventDefault();15 jQuery("#js-drawer-icon").toggleClass("open");16 jQuery("#js-drawer-menu").toggleClass("open");17 });18 19 jQuery(".drawer-item.menu-item > a").click(function() {20 jQuery("#js-drawer-icon").removeClass("open");21 jQuery("#js-drawer-menu").removeClass("open");22 });23});

試したこと

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

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

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