ページ内リンクがあるときに、リンクボタンを押すとハンバーガーメニューが閉じるようにjQueryで設定をしたのですが、リサイズに対応しようとしてめちゃくちゃつまづいてしまったので忘れないようにメモしておきます。

(window).width()で設定したらリサイズしたときに対応できなかった

初めに書いたコードがこちら↓

var windowWidth = $(window).width();
var windowSm = 767.98;
if (windowWidth <= windowSm) {

	$('#global-menu a[href]').on('click', function (event) {
		$('#open-btn').trigger('click');
	});
} 

ウィンドウ幅が767.98以下の時にハンバーガーメニュー内のリンクをクリックすると、ハンバーガーボタンをクリックした時と同じ挙動をするように記述しました。

しかし、これだとウィンドウ幅を変更したときに変更後のウィンドウサイズが反映されません。。。
ウィンドウサイズを変更したときに、変更後のサイズで判定する設定が必要ですね。

resizeを使ったら繰り返し処理が発生してえらいことになった

ウィンドウサイズを変更するごとに変更後のサイズを取得して上記挙動になるようにしてみました。

その時のコードがこちら↓

$(window).on('resize', function(){
  var windowSize = $(window).width();

  if (windowSize <= 767.98) {
  	$('#global-menu a[href]').on('click', function (event) {
		$('#open-btn').trigger('click');
	});
  } 
});

これで、ウィンドウサイズを変更しても対応できると思ったのですが、サイズを変更するごとに繰り返し処理が発生してしまいました(´・ω・)

調べて設定してみたもののうまくいかなかったもの↓

• .on(‘click’).の前に.off(‘click’)の設定をする　→　なぜかコンソールエラーが出た
• risizeではなくwindow.matchMediaを使う　→　問題点は変わらず
• setTimeoutでイベントを終了させる　→　挙動がおかしくなった

※実際のところは私の記述に間違いがあったのかもしれませんが、今となっては確認できず・・・・。

同じ問題で困っている方を発見！

検索方法が悪いのかと、単語で検索するのをやめて、素直に
「slideToggleが繰り返される」
と検索すると、一ページ目で同じ問題を質問されているページ発見！

※参考にさせていただいたサイト：https://teratail.com/questions/59074
teratail本当にお世話になっています！

私の現状とほぼ同じ状態の質問をされているので、ほぼコピペで解決できました！

実際に私が使用したときのコード↓

$("#global-menu a[href]").on("click", function() {
var windowWidth = window.innerWidth;

   if (windowWidth <= 767.98) {
	$('#open-btn').trigger('click');
   }
});

上記コードでめでたく解決しました！

のですが、別問題が残ってましたー！

ハンバーガー触った後にPCサイズにするとナビメニューが消えてしまう問題

上記コードで設定した767.98px以下でハンバーガーメニューの挙動を確認し、767.98よりウィンドウサイズを大きくすると、なぜかナビゲーションメニューが消えてしまう問題が出てきました（全然解決できてない）

のですが、こちらの問題も上記参考サイトにそのまま掲載されていました。最高です。

原因は、$(‘.navbar-toggler’).trigger(‘click’);した際にナビゲーションメニューを内包している.header-navにdisplay:none;を設定していたためでした。（ハンバーガーメニューの設定で記述していた/これはこれで必要。）
ちなみにメディアクエリで767.98px以下の時に設定していましたが、ウィンドウサイズを767.98以上に変更しても、設定がそのままになっているようでした。

ウィンドウサイズが768px以上の時に#global-menuにdisplay:block;を設定することで解決できました。（767.98以下の時のdisplay:none;が優先される場合は、display:block !important;にすることで解決）

上記で挙動に問題なく設定ができました。

※下記は768px以上の時にメニューにflexをかけているため、display:flex !important;と設定しています。

※上記以外のスタイルは最小限の設定にしています。

See the Pen ページ内リンクをクリックするとナビメニューが非表示になる（スマホ表示） by mayumi (@mayu0106) on CodePen.