レスポンシブデザインで非表示の切り替えが起こらない

Question

前提・実現したいこと

html,css,jqueryを使って模写コーディングを行っています。
729px,880pxの二箇所をブレイクポイントとしています。
レスポンシブデザインで、729px以下の時に、display:none;で見えなくした部分がなどに不具合が生じています。

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

最初の画面を729px以下で始めると、本来非表示でない部分が見えません。また、730px以上の画面で始めると、729px以下のとき、ハンバーガーメニューをクリックすることが出来ません。
729px以下の時はハンバーガーメニューをクリックすることができ、730px以上の時はその部分が非表示になっていません。

該当のソースコード

html
<div id="mask"><i class="fas fa-bars"></i></div>
<div id="header-right">
     <div id="gnav-wrapper">
                    <ul>
                        <li><a href="#">ホーム<i class="fas fa-angle-down"></i></a>
                            <ul>
                                <li><a href="#">→カスタマイズ</a></li>
                            </ul>
                        </li>
                        <li><a href="#">ページ<i class="fas fa-angle-down"></i></a>
                            <ul>
                                <li><a href="#">アイキャッチ画像なしのページ</a></li>
                                <li><a href="#">ページ（全幅テンプレート）</a></li>
                            </ul>
                        </li>
                        <li><a href="#">タイポグラフィー</a></li>
                        <li><a href="#">お問い合わせ</a></li>
                    </ul>
                    <i class="fas fa-times"></i>
    </div>

     

            
css

#mask{
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 40px;
  display: none;
  cursor: pointer;
}
.fa-times{
  position: absolute;
  right: 10px;
  top: 20px;
  font-size: 50px;
  display: none;
  cursor: pointer;
}
#header-right{
  display: flex;
  position: relative;
}
#gnav-wrapper{
  padding-top: 55px;
  margin-right: 150px;
}
#gnav-wrapper ul{
  display: flex;
  font-size: 16px;
  color: #333;
}
#gnav-wrapper li{
  text-align: center;
  margin-right: 20px;
  writing-mode: ho;
}
#gnav-wrapper ul ul{
  display: none;
  box-shadow: 0.5px 0.5px #f0f0f0;
}
#gnav-wrapper li li a{
  display: block;
  width: 200px;
  padding: 10px 20px;
}

responsive
@media(max-width:729px){
    #mask{
        display: block;
        position: fixed;
    }
    .fa-times{
        display: block;
        position: fixed;
    }
    #gnav-wrapper{
        background-color: white;
        opacity: 0.8;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
        display: none;
    }
    #gnav-wrapper ul{
        flex-flow: column;
        font-size: 22px;
    }
    #gnav-wrapper ul ul{
        display: block;
        box-shadow: none;
    }
    #gnav-wrapper li{
        margin-bottom: 10px;
    }
    #gnav-wrapper li li{
        border: none;
        text-align: center;
        margin: 0 auto;
    }
    .fa-angle-down{
        display: none;
    }
jquery
$(function(){
    if(window.matchMedia('(min-width:730px)').matches){
        $('#gnav-wrapper').children('ul').children('li').hover(
            function(){
                $(this).children('ul').fadeIn();
        },
            function(){
                $(this) .children('ul').fadeOut();
        });
    } else {
        $('#mask').click(function(){
            $('#gnav-wrapper').fadeIn();
            $('#mask').fadeOut();
        });
        $('.fa-times').click(function(){
            $('#gnav-wrapper').fadeOut();
            $('#mask').fadeIn();
        });
    }
})

試したこと

レスポンシブデザインとjQueryでブレイクポイントが重なっていたため、それを変更しても変わりませんでした。

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

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

Comments

[Lhankor_Mhy]

補足願います。
「本来非表示でない部分」とはHTMLで言うとどの要素ですか？ #header-rightでしょうか？
「その部分」とはHTMLで言うとどの要素ですか？ #maskですか？

[Lhankor_Mhy]

「729px以下の時はハンバーガーメニューをクリックすることができ、730px以上の時はその部分が非表示になっていません。」この一文は、前文の「730px以上の画面で始めると、」からつながっていますか？
つまり、「730px以上の画面で始めると、729px以下の時はハンバーガーメニューをクリックすることができ、730px以上の時はその部分が非表示になっていません。」という意味ですか？

[Lhankor_Mhy]

また、最終的にどのような動作にしたいのかも具体的に書いてください。

[corgi_]

言葉足らずですみません。
「本来非表示でない部分」は＃header-rightのことです。
「その部分」も#header-rightのことです。

「729px以下の時は～に対する返答ですが、ベストアンサーとさせていただいた内容から推察します。730px以上で始めると、730px以上でページが読み込まれているので、729px以下の時に表示されるハンバーガーメニューがクリックできないのだと思います。また、729px以下で始めると729px以下でページが読み込まれているので、730px以上にすると＃header-rightが非表示のままなのだと思います。

最終的には、730px以上で＃header-rightが表示され、729px以下でハンバーガーメニューをクリックすることが出来る状態にしたかったです。

Answer 1

補足依頼を見ていただけていないようなので想像で回答します。

$(function(){
    if(window.matchMedia('(min-width:730px)').matches){

これが原因だと思います。ビューポートのサイズをチェックしているのがページのロード時だけですので、途中でサイズが変わった場合は上手く動作しないです。

イベントリスナを使うといいかもしれないです。
MediaQueryList - Web API | MDN

Comments

[corgi_]

返答遅れてすみません！
読み込みの問題解決しました！

また別で問題も発生したのでまた考えたいと思います。
ありがとうございました！！