jQueryを利用したハンバーガーメニューがうまく動きません

Question

740px以下の画面でヘッダーのナビゲーションをハンバーガーメニューにしたく色々調べながら記述しているのですが、740px以下になるとハンバーガーメニューに切り替わるものの、クリックしても何も動作しません。

以下、試みたコードです。

html

				<nav class="hamburger-list">
					<i class="fas fa-bars"></i>
				</nav>

				<nav class="list">
					<ul class="menu-list">
						<li class="menu-item"><a href="#">about me</a></li>
						<li class="menu-item"><a href="#">category</a></li>
						<li class="menu-item"><a href="#">archive</a></li>
					</ul>
				</nav>
			</div>

css

.hamburger-list {
	margin: 30px;
	font-size: 150%;
}

.list {
	display: none;
	position: relative;
	
}
.list .menu-list {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}

.list .menu-list .menu-item{
	border-bottom: 3px solid #ff3333;
	font-size: 130%;
	margin: 20px;

}

.list .menu-list .menu-item:hover {
	opacity: 0.5;
}


@media (min-width: 740px) {
	.list {
		display: block;
	}
	.hamburger-list {
		display: none;
	}
}

jQuery

		jQuery(document).ready(function() {

//			ここに別のjQueryのコードがあります（今回の件とは別であり、こちらは問題なく動いています）


			jQuery('.hamburger-list').on('click', function() {
				if (jQuery('.list').css('display') === 'none') {
					jQuery('.list .menu-list').slideUp();
				} else {
					jQuery('.list .menu-list').slideDown();
				}
			});
		});

	</script>

※質問に関連があると思われる部分のみ抜粋しています。

お手数ですが、ご教示いただけますでしょうか。

Answer 1

問題が2つあるようです。

• .list自体が非表示なのに、jQueryで表示/非表示を切り替える対象が子要素である.list .menu-listになっています。親要素が見えないので子要素を切り替えても意味がありません。
• slideUp()とslideDown()を使う場所が逆です。.listが非表示の時には表示させたいので、slideDown()を使ってください。

具体的には以下のように修正すれば動くかと思います。
jQuery('.list .menu-list').slideUp();→jQuery('.list').slideDown();
jQuery('.list .menu-list').slideDown();→jQuery('.list').slideUp();

Comments

[piyo-coder335]

素早く的確なアドバイスをいただきありがとうございます。
ご指摘の通り、切り替える対象を子要素にものと勘違いしていたことと、`slideUp`と`slideDown`の意味を逆に捉えていたのが原因でした。
修正しましたところ、無事解決しました。
ありがとうございました！

Answer 2

コードを以下のように修正し。

jQuery('.hamburger-list').on('click', function() {
  if (jQuery('.list').css('display') === 'none') {
    jQuery('.list').slideDown();
  } else {
    jQuery('.list').slideUp();
  }
});