jQueryナビゲーションクリックでメニュー表示

Question

jQueryを使ってメガメニューを作成したいのですが、JSの部分がどおしても上手くいきません。
下記のJSを書いており、現状メニューをクリック後、別のメニューをクリックしても、
最初にクリックしたメニューが非表示となりません。
.fadeToggleを使っているので、非表示にしたいメニューをもう一度クリックすれば、非表示にはなるのですが、
よく見る一般的なメガメニューのように、他のメニューをクリックした時に、
自動的にそれ意外のメニューを非表示にできればと考えております。

$(".header__sub-nav").hide();

いろいろ試しており、上記のコードを最初に加えることで、非表示にすることは可能となりました。
ただ、このコードだと、例えばMENU01を2回クリックしても、非表示にできません...
つまり一度メガメニューを開くと「メガメニューが表示されていない状態」に戻すことができません。

一般的なメガメニューを作成するにはどのようにコードを変更すればよろしいでしょうか。

codepenで同じ状態を再現しております。
https://codepen.io/jyoze/pen/bGWzXpG

	<header class="header">
		<div class="header__inner">
			<div class="header__right">
				<nav class="header__nav">
					<ul>
						<li><a href="#sub1">MENU01</a></li>
						<li><a href="#sub2">MENU02</a></li>
						<li><a href="#sub2">MENU03</a></li>
					</ul>
				</nav>
			</div>
		</div>

		<div class="header__sub-nav" id="sub1">
			<h2 class="no-style">サブナビ01</h2>
			<ul>
				<li><a href="">MENU</a></li>
				<li><a href="">MENU</a></li>
				<li><a href="">MENU</a></li>
				<li><a href="">MENU</a></li>
			</ul>
		</div>
		<div class="header__sub-nav" id="sub2">
			<h2 class="no-style">サブナビ03</h2>
			<ul>
				<li><a href="">MENU</a></li>
				<li><a href="">MENU</a></li>
				<li><a href="">MENU</a></li>
				<li><a href="">MENU</a></li>
			</ul>
		</div>
		<div class="header__sub-nav" id="sub3">
			<h2 class="no-style">サブナビ03</h2>
			<ul>
				<li><a href="">MENU</a></li>
				<li><a href="">MENU</a></li>
				<li><a href="">MENU</a></li>
				<li><a href="">MENU</a></li>
			</ul>
		</div>

	</header>

.header {
	&__inner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 30px);
		padding: 15px 15px;
		margin: 0 auto;
		box-sizing: content-box;
		line-height: 1;
	}
	&__nav {
		ul {
			display: flex;
			justify-content: flex-end;
			li:not(:last-child) {
				margin-right: 20px;
			}
		}
		a {
			color: #000;
		}
	}
	&__sub-nav {
		display: none;
		position: absolute;
		// bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100vw;
		background-color: #fff;
	}
}

	<script>
	$(function(){
    $('.header__nav li a').on('click', function () {
			$($(this).attr("href")).fadeToggle();
			if( $("[href^='#']") ){
				return false;
			}
    });
	});
	</script>

Answer 1

下記の形でどうでしょうか。

$(function(){
	let openedId = ''; //開いているメニューのIDを保存 開いていない時は空とする
	$('.header__nav li a').on('click', function () {
		//開いているメニューがある時は閉じる
		if(openedId!=='') $(openedId).stop(false, false).fadeOut();
		//開いていたメニューと押したメニューが同じ場合は空、違う場合はIDを保存
		openedId = (openedId===$(this).attr("href")) ? '' : $(this).attr("href");
		//IDが保存されている場合はそのメニューを開く
		if(openedId!=='') $(openedId).stop(false, false).fadeIn();
	});
});

途中の.stop(false, false)はメニューを連打された時、遅れてアニメーションが実行されないために入れています。意味がわからなかったら、2箇所の.stop(false, false)を消して、メニューを連打してみてください。

Comments

[jyoze]

webgotoさん、ご教示ありがとうございます。
上記内容で作りたかった形ができましたm(_ _)m
一点だけすみません、サイト内に高さがあるときに、ナビゲーションをクリックすると、
上記方法だとアンカーリンクのように、下にスライドしてしまいます。
こちらは防げないでしょうか？
下記でテストしております。
https://codepen.io/jyoze/pen/ZEKPXLR

[webgoto]

clickの引数にeを追加して、e.preventDefault()で通常のリンククリックを無効にすると良いと思います。

$('.header__nav li a').on('click', function (e) {
e.preventDefault();

[jyoze]

webgotoさん、大変ありがとうございます。
申し訳ございません、
メガメニューでは無く通常のリンクをが含まれる場合は、if分で分ける必要があるかと思うのですが、その場合は、どのようになりますでしょうか。
if($(this).indexOf('#')) {
e.preventDefault();
}
このようにしてみたのですが、上手く動きませんでした...
a要素ではなくli要素にIDを付ける方法も試してみたのですが、うまく動きませんでした...

[webgoto]

通常のリンクは元から除外したほうが良いと思いますので、メニューを開くaに.megaとクラス名を追加して、
$('.header__nav li a.mega').on('click', function () {
としてメニューを開くリンクがクリックされた時だけ、関数が実行されるようにするのが良いと思います。

[jyoze]

webgotoさん、ありがとうございます。
丁寧に教えていただき、とても助かりました。
無事解決いたしました。とても単純な方法で解決できるのですね。
解決までお付き合いいただき、本当にありがとうございました。