ハンバーガーメニューを表示して、その後非表示にした後にメニュー一覧が消える

Question

ハンバーガーボタンを押してメニューを表示し、その後✖︎ボタンで非表示にして、
ウィンドウ幅を広げると、そこにあったはずのメニューリストが消えてしまいます。（画像参照）

（ハンバーガーボタンを押す前）
![

（ハンバーガーボタンを押してメニューを表示させて✖︎ボタンを押した後）

コードは下記のようになっています。
jqueryが違うのでしょうか。
どなたかご教示いただけますと幸いです。

    <!-- header -->
    <header class="header">
        <div class="header__inner">
            <div class="header__left-white">
                <p class="header__title">未来を創るホームページ</p>
                <div class="header__logo-white">
                    <img src="../images/logo.png" alt="wadeロゴ">
                </div>
            </div>
            <div class="header__nav">
                <ul class="header__nav__list">
                    <li class="header__menu">
                        <a href="../../SERVICE/service.html">
                            事業内容
                            <span>SERVICE</span>
                        </a>
                    </li>
                    <li class="header__menu">
                        <a href="../../WORKS/works.html">
                            制作実績
                            <span>WORKS</span>
                        </a>
                    </li>
                    <li class="header__menu">
                        <a href="../../NEWS/news.html">
                            新着情報
                            <span>NEWS</span>
                        </a>    
                    </li>
                    <li class="header__menu">
                        <a href="../../RECRUIT/recruit.html">
                            採用情報
                            <span>RECRUIT</span>
                    </a>
                    </li>
                    <li class="header__menu">
                        <a href="../../COMPANY/company.html">
                            会社概要
                            <span>COMPANY</span>
                        </a>
                    </li>
                    <li class="header__menu header__menu__last">
                        <a href="../../CONTACT/contact.html">
                            お問い合わせ
                            <span>CONTACT</span>
                        </a>
                    </li>
                    <!-- メニューアイテムの仕切り縦線のための空タグ -->
                    <li class="header__menu header__menu__vacant"></li>
                     <!-- メニューアイテムの仕切り縦線のための空タグ -->
                </ul>
            </div>
        </div>

            <!-- ハンバーガーメニュー -->
            <div class="hamburger">
                <span class="bar-top"></span>
                <span class="bar-middle"></span>
                <span class="bar-bottom"></span>
              </div>
            <!-- ハンバーガーメニュー-->

    </header>
    <!-- header -->

$(function() {
    $('.hamburger').on('click',function() {
        $('.header__nav__list').fadeToggle(300);
        $(this).toggleClass('cross');
        $('body').toggleClass('noscroll');
    });
});

Answer 1

こんにちは。

jqueryが違うのでしょうか。

そうですね、jQuery のコードが原因です。

The .fadeToggle() method animates the opacity of the matched elements. When called on a visible element, the element's display style property is set to none once the opacity reaches 0, so the element no longer affects the layout of the page.

.fadeToggle() | jQuery API Documentation

（勝手訳）.fadeToggle() メソッドは、マッチした要素の opacity をアニメーションします。表示されている要素に使うと、opacity が0になった時点で display が none になりますから、ページのレイアウトから消えます。

---

解決方法はいろいろ考えられますが、window.matchMedia イベントを拾って style 属性を消してしまうのが一番手っ取り早いのではないかな、と思います。

サンプル

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

Comments

[rasan]

ご回答ありがとうございます！
記載いただいたコードを追記したところ、メニューが表示されるようになりました。
Javascriptの理解がまだまだなので、頑張ります。
ありがとうございました。