JavaScript初心者です。
サイトのパーツとしてPCサイズではhover時に中の要素を出して、スマホサイズではclick時に中の要素をアコーディオンメニューのように出すことを実装しようとしているのですが、
windowのresizeでwidthを取得していifの分岐、など試してみてもresize前のイベントが消えなかったり、挙動がバグったりして困っています。

現状は一度諦めて下記のように記述して、サイズ変更の都度リロードしている状態です。
下記の記述をresizeしても正しく動作するにはどうすれば良いでしょうか。
ご指導頂けましたら幸いです。
何卒宜しくお願い申し上げます。

function switchByWidth() {
  if (window.matchMedia("(max-width: 767px)").matches) {

    // スマホサイズ アコーディオンメニュー
    $(function () {
      $("#header__menu01").on("click", function () {
        $(this).find("span").next().slideToggle(200);
      });
    });

  } else if (window.matchMedia("(min-width:768px)").matches) {

    // pcサイズホバーイベント
    $("#header__menu01").hover(
      function () {
        //カーソルが重なった時
        $(this).children(".flex-wrapper").addClass("open");
      },
      function () {
        //カーソルが離れた時
        $(this).children(".flex-wrapper").removeClass("open");
      }
    );

  }
}

window.onload = switchByWidth;
window.onresize = switchByWidth;