JavaScriptのメディアクエリではまったこと

レスポンシブサイトでメニューを切り替える方法としては様々な方法があって、メニューの内容や階層、WordPressでグローバルメニューを設定して動的に出力している場合など様々なケースがあってそれに応じて手段に一貫性がなかったりする。

今回のケースとしては、メディアクエリでjsを読み込むように考えて以下のように記述した。

<script>
jQuery(document).ready(function($) {
if (window.matchMedia( '(max-width: 768px)' ).matches) {
$.ajax({
url: '<?=get_template_directory_uri();?>/assets/js/sp-nav.js',
dataType: 'script',
cache: false
});
} else {
};
});
</script>

ところが、これでは不具合がある！

そう、最初からメディアクエリで設定した画面幅で読み込むなら問題はないが、リサイズで小さくした時は反応しないとのだった。
(リロードすれば読み込んで発火するけれど・・・・)

window.matchMediaを使用してみる

色々と調べたり書いて見たりして最終的にCSSと同じように動いてくれるようになったのが以下のやり方だった。
これは今後の自身のためにメモとして残しておく。

<script>
jQuery(function(){
 const mediaQuery = window.matchMedia('(max-width: 768px)');
 // ページが読み込まれた時に実行
 handle(mediaQuery);
 
 // ウィンドウサイズを変更しても実行（ブレイクポイントの監視）
 mediaQuery.addListener(handle);
 function handle(mm) {
  if (mm.matches) {
  // ウィンドウサイズ768px以下の時
   jQuery(function(){
    jQuery("#menu").css("display","none");
	 jQuery("#menu-bt").on("click", function() {
	  jQuery("#menu").slideToggle(300);
	  jQuery(this).toggleClass("active");
	   if(jQuery(this).hasClass("active")){
	    jQuery("#drower").attr('src','/img/close.svg');
		}else{
		jQuery("#drower").attr('src','/img/menu.svg');
		}
	   });
	  });
	 } else {
	 // それ以外の時
	 jQuery("#menu").css("display","block");
	}
  }
});
</script>

この方法だと色んな使い方が出来そうだ。