ウィンドウサイズでメニューバーの挙動を変えたい

前提・実現したいこと

HTML/CSS、javascript初学者です。基本的なことかもしれませんが、数日悩んで解決できずにおりますのでアドバイスを頂けたらと思います。
ヘッダー部分のメニューバーをPCサイズではhoverでドロップダウン、タブレット以下のサイズではclickでドロップダウンとするナビゲーションメニューを作っています。

PCサイズ（1200px以上）の際にhoverで挙動する部分をjQueryで設定しましたが、その挙動がタブレットサイズ（1200px以下）でも活きてしまうので、タブレットサイズの時にはclickで挙動するようにしたい。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

挙動自体はきちんと動くのですが、1回1回リロードをして読み込まないと、それぞれの挙動を失ってしまいます。

該当のソースコード

if (window.matchMedia("(min-width: 1200px)").matches) {
$(function () {
$(".dropdown-btn").hover(
function () {
$("ul:not(:animated)", this).slideDown();
},
function () {
$("ul.dropdown", this).slideUp();
}
);
});
} else {
$(function () {
$(".dropdown-btn").on(
"click",
function () {
$("ul:not(:animated)", this).slideDown();
},
function () {
$("ul.dropdown", this).slideUp();
}
);
});
}

試したこと

以下のようにresizeを使ってみましたが、構文の書き方を理解できていないのか全く動かなくなってしまいます。

$(window).on('load resize',function(){
var winWidth = $(window).width();
if(winWidth < 1200){
$('.toggle').show();
$('.dropdown').hide();
} else{
$('.toggle').hide();
$('.dropdown').show();
}
});
$('.toggle').on('click',function(){
$(this).next('li').slideToggle();
$('.open').removeClass('open');
$('dropdown').next('li').slideUp();
operner =close;
});

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

主な修正点

・window.matchMediaの判定がアクセス時の1回しか行われていなかったので、ブレイクポイントをまたぐたびに実行させる

・ブレイクポイントをまたぐたびに、イベントにバインドされた関数を消去

・clickに2つの関数はバインドできないので修正

js
1$(function () {
2	let mql = window.matchMedia("(min-width: 1200px)");
3	
4	function checkBreakPoint(mql){
5		$(".dropdown-btn").off(); //イベントにバインドされた関数を削除
6		if (mql.matches) {
7			$(".dropdown-btn").hover(
8				function () {
9					$("ul:not(:animated)", this).slideDown();
10				},
11				function () {
12					$("ul.dropdown", this).slideUp();
13				}
14			);
15		} else {
16			$(".dropdown-btn").on("click",
17				function () {
18					if($("ul", this).css('display')==='none'){
19						$("ul:not(:animated)", this).slideDown();
20					}else{
21						$("ul.dropdown", this).slideUp();
22					}
23				},
24			);
25		}
26	}
27	
28	checkBreakPoint(mql); //初回実行
29	mql.addListener(checkBreakPoint); // ブレイクポイントまたぐ毎に実行
30});