【jquery】ドロップダウンとアコーディオンの切り替えがうまくいきません

jquery初心者です。
サブメニューのあるグローバルナビゲーションを作成しています。
PC表示の時はマウスホバーでサブメニューをドロップダウン、
スマホ（タブレット）表示の時はハンバーガーメニューにして、サブメニューをクリックでアコーディオンで表示させたいです。
自分なりに作ってみたのですが、画面をリサイズした時にPC、スマホ共にドロップダウンとアコーディオンの両方が作動しており、うまくいきません。色々調べたのですが、一向に解決せず困っております。
ちなみに画面リサイズ前のブラウザ初回起動時にはうまくいっております。
画面リサイズ時に、初回起動時と同じ動きをさせたいです。
ご教授いただければと思います。

はじめて投稿するので、勝手がよくわからず、何か質問に不備がありましたらすみません。

HTML
1	<nav class="gnav">
2		<ul class="menu">
3			<li>
4				<a href="#">メニュー1</a>
5				<ul class="menu_sub">
6					<li><a href="">サブメニュー</a></li>
7					<li><a href="">サブメニュー</a></li>
8					<li><a href="">サブメニュー</a></li>
9				</ul>
10			</li>
11			<li>
12				<a href="#">メニュー2</a>
13				<ul class="menu_sub">
14					<li><a href="">サブメニュー</a></li>
15					<li><a href="">サブメニュー</a></li>
16				</ul>
17			</li>
18			<li><a href="#">メニュー3</a></li>
19		</ul>
20	</nav>
21
22	<!-- メニューアイコン -->
23	<div class="toggle_button">
24		<span class="toggle_line01"></span>
25		<span class="toggle_line02"></span>
26		<span class="toggle_line03"></span>
27		<p class="toggle_txt">MENU</p>
28	</div>
29	<div class="modal_bg"></div>
30

jquery
1/*-------------------------------------
2	ナビゲーション
3-------------------------------------*/
4
5/* アコーディオン、ドロップダウン */
6$(function () {
7
8	let timer = '';
9	let screenWidth = $(window).width();	//画面サイズ取得
10
11	/*---------- 初回画面幅判定 ----------*/
12	if (screenWidth >= 960) {	//pc以上なら
13		dropdown();
14	} else {	//tab、spなら
15		accordion();
16	}
17
18	/*---------- 画面リサイズ時判定 ----------*/
19	$(window).resize(function () {
20		if (timer > 0) {
21			clearTimeout(timer);
22		}
23
24		timer = setTimeout(function () {
25			let screenWidth = $(window).width();
26
27			if (screenWidth >= 960) {	//pc以上なら
28				dropdown();
29				//要素の効果を無効化する
30				return false;
31			} else {	//tab、spなら
32				accordion();
33				//要素の効果を無効化する
34				return false;
35			}
36		}, 500);
37	});
38
39});
40
41
42
43/*-------------------------------------
44	プラグイン
45-------------------------------------*/
46
47/* ドロップダウン */
48function dropdown() {
49	$("ul.menu li").hover(
50		function () {
51			$(".menu_sub:not(:animated)", this).slideDown(300);	//アニメ実行中に同じアニメが追加実行されない
52		},
53		function () {
54			$(".menu_sub", this).slideUp(0);
55		}
56	);
57}
58
59/* アコーディオン */
60function accordion() {
61	$('.menu > li a').click(function () {
62		// $('menu_sub').css('display','none');
63		$(this).next().slideToggle(400);
64	});
65}
66
67/* --------------------------------------------------------- */
68
69
70

行動規範の内容に同意します

回答1件

ベストアンサー

resize した時に、dropdown() や accordion() で設定したイベントリスナを解除しなければいけないのではないかな、と思いました。

jQuery リファレンス：off

.off() | jQuery API Documentation

投稿2022/02/02 04:20

Lhankor_Mhy

総合スコア37409

arin1128

2022/02/03 08:19

ご回答ありがとうございます。色々試行錯誤しながら無事解決いたしました！（^^）本当にありがとうございました！感謝です。前の挙動が残っていたので、リサイズ時にきっと前の挙動を解除しないといけないのかな。と思っていたので、まさにイベントを解除するものを教えていただきありがとうございます。ちなみに以下のようにして解決しました（^^） /*---------- 画面リサイズ時判定 ----------*/ $(window).resize(function () { if (timer > 0) { clearTimeout(timer); } timer = setTimeout(function () { let screenWidth = $(window).width(); $("ul.menu li").off(); //今回追加分 $('.menu > li a').off(); //今回追加分 if (screenWidth >= 960) { //pc以上なら dropdown(); } else { //tab、spなら accordion(); } }, 500); });