FadeToggleに勝手にdisplay:noneがついてメニューが消えた時の対象法

#FadeToggleについて厄介なdisplya:noneについて
FadeToggle等を使うと閉じた時にdisplay:noneがつくのは仕様らしい・・・
そこで色々調べて掲示板などをみたり試した結果！！
良い方法が見つけた、知っているひとは多いと思うが初心者や知らない人のために残して置きます。

まず今回自分が試したのはwindow.matchMediaを使う方法です。
window.matchMediaの説明は今回は省略させていただきます。
では今回の本質であるwindow.matchMediaを使った書き方を紹介します。

window.matchMedia('(max-width: 768px)').addEventListener('change', e => {
    if (!e.matches) $('.p-header__nav').attr('style', null);

});

ただこれだけじゃ一つ問題が出ます。
この状態からブラウザーサイズを大きくして、また小さくするとこうなります。

##解決策
上記でかいたコードに１行追加するだけ！！

window.matchMedia('(max-width: 768px)').addEventListener('change', e => {
    if (!e.matches) $('.p-header__nav').attr('style', null);
    $('.p-header_bagger-btn').removeClass('cross');//追加したコード
  });

ハンバーガーメニューとかはFadeToggle以外ににもCSSでやる方法でもあるのでそっちでも試してみようと思う。
初心者のためにでも役に立ては嬉しいです。