【jQuery】matchMediaで画面幅を判定してアコーディオンの有無を切り替えたい

Question

実現したいこと

フッターのサイトマップリストの項目が多いため、
PCでは全て表示し、SPではアコーディオンにして項目ごとに開閉させたいです。

現在480px以下で次のようになります。
0. pクリックでulにクラスsp-accordionを追加
0. p.sp-accordion + ulを一旦すべて非表示
0. クリックしたp.sp-accordion + ulをslideToggleで表示
0. クリックしたp.sp-accordion + ul以外で開いている要素はslideUpで閉じる

しかし、再度リサイズしてブラウザ幅が480px以上になったときに、
クラスの付けはずしは処理されるのですが、slideToggleは実行されてしまいます。
$(this).next('.sp-accordion ul').slideToggle();にして
480px以上では .sp-accordion が存在しない状態でも開閉が実行されました。

また、そこから再度480px以下にブラウザ幅を縮めると、
slideToggleが「開いてすぐ閉まる」という動作になり、ulが表示されたままになりません。

リサイズに伴うクラスの付けはずしはなされているので、
slideToggleの書き方や書く位置が問題なのでしょうか。

jQueryを使わずCSSのみで開閉アニメーションも試したのですが、
動きがやや不自然だったのでjQueryを使って実現したいと考えています。

どうすれば望む内容を実現できるのか、お力をお貸しいただけますと幸いです。

<div>
    <p class="midashi">コンテンツ1</p>
    <ul>
        <li><a href="">ページ 1-1</a></li>
        <li><a href="">ページ 1-2</a></li>
        <li><a href="">ページ 1-3</a></li>
        <li><a href="">ページ 1-4</a></li>
    </ul>
</div>
<div>
    <p class="midashi">コンテンツ2</p>
    <ul>
        <li><a href="">ページ 2-1</a></li>
        <li><a href="">ページ 2-2</a></li>
        <li><a href="">ページ 2-3</a></li>
        <li><a href="">ページ 2-4</a></li>
    </ul>
</div>

$(function() {
	var mql = window.matchMedia('(max-width: 480px)');

	function spSitemap(mql) {
		if (mql.matches) {
			$('.midashi').addClass('sp-accordion');
			$('.sp-accordion + ul').hide();
			$('.sp-accordion').on("click", function() {
				$(this).next().slideToggle(300);
				$('.sp-accordion').not($(this)).next().slideUp(300);
			})
		} else {
			$('.midashi').removeClass('sp-accordion');
			$('.midashi + ul').show();
		}
	}
	
	spSitemap(mql); // 初回実行
	mql.addEventListener("change", spSitemap ,false);

	// addEventListener 時と変わらず
	// mql.addListener(spSitemap);

	// SP → PC → SP でulが閉じない / クリックで閉 → 開となる
	//window.onresize = spSitemap;
});

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

追記です。

別の方法でひとまず解決したため追記します。

しかし、元々の投稿内容についてのご意見も伺いたいので
まだ少し質問を閉じずにいたく思います。
問題点やヒントをご教示いただけるようでしたら、引き続きよろしくお願いいたします。

しかし、再度リサイズしてブラウザ幅が480px以上になったときに、
クラスの付けはずしは処理されるのですが、slideToggleは実行されてしまいます。
$(this).next('.sp-accordion ul').slideToggle();にして
480px以上では .sp-accordion が存在しない状態でも開閉が実行されました。

また、そこから再度480px以下にブラウザ幅を縮めると、
slideToggleが「開いてすぐ閉まる」という動作になり、ulが表示されたままになりません。

---

以下は質問したコードとは別の書き方による解決方法です。

使ったことがなかったのですが、CSSのpointer-eventsであっさり実現して拍子抜けしました。
スマホ実機での検証はまだ出来ていませんが、あっさりし過ぎたのでこれで良いのか不安です。
問題ある書き方でしたらこちらもご指摘いただけると幸いです。

元の質問ではCSSで動作に関わる記述はしていませんでしたが、
この方法ではCSSにもアコーディオンに関わる内容を記述しています。

// 解決したコード
$(function(){
	var mql = window.matchMedia('(max-width: 480px)');

	$('.midashi').click(function() {
		$(this).toggleClass('selected');
		$(this).next().slideToggle(300);
		$('.midashi').not($(this)).next().slideUp(300);
	});
	function spSitemap(mql) {
		if (!mql.matches) {
			$('.midashi + ul').attr('style','inline-block');
		}
	}
	spSitemap(mql);
	mql.addEventListener("change", spSitemap ,false);
});

// 解決したコード
#footer .midashi {
	pointer-events: none;
}
#footer .midashi + ul {
	display: inline-block;
}
@media screen and (max-width: 480px) {
	#footer .midashi {
		pointer-events: all;
	}
	#footer .midashi + ul {
		display: none;
	}
}