前提・実現したいこと

JavaScriptでドロップダウンメニューを作成しています。
プログラムの切り分けが上手くいかず
最初は全てのサブメニューが表示される状態でした。
プログラムを書き分けて直下のサブメニューしか表示されないようにはなりましたが
サブメニューを開いた状態で他のサブメニューを開くと重複した状態になってしまいます。
開いているサブメニューを閉じなければ、他のサブメニューは開けないようにしたいです。

該当のソースコード

html
1<nav id="nav">
2	<div class="nav">
3		<ul>
4			<li><a href="#">メニュー1</a></li>
5			<li><a href="#">メニュー2</a></li>
6			<li><span class="subnavi-button">メニュー3</span>
7				<section class="subnavigation">
8					<div class="subnavigation-inner">
9						<nav class="subnavi">
10							<ul>
11								<li><a href="#">サブメニュー1</a></li>
12								<li><a href="#">サブメニュー2</a></li>
13								<li><a href="#">サブメニュー3</a></li>
14								<li><a href="#">サブメニュー4</a></li>
15							</ul>
16						</nav>
17					</div>
18				</section>
19			</li>
20			<li><a href="#">メニュー4</a></li>
21			<li><span class="subnavi-button02">メニュー5</span>
22				<div class="subnavigation02">
23					<div class="subnavigation-inner">
24						<nav class="subnavi">
25							<ul>
26								<li><a href="#">サブメニュー5</a></li>
27								<li><a href="#">サブメニュー6</a></li>
28								<li><a href="#">サブメニュー7</a></li>
29								<li><a href="#">サブメニュー8</a></li>
30							</ul>
31						</nav>
32					</div>
33				</div>
34			</li>
35			<li><a href="#banner-area">メニュー6</a></li>
36		</ul>
37	</div>
38</nav>

scss
1.subnavigation {
2  display: none;
3}
4
5.subnavigation02 {
6  display: none;
7}
8
9section.subnavigation {
10  background-color: #1bad55;
11  position: absolute;
12  width: 100%;
13  top: 100%;
14  left: 0;
15  padding-top: 16.5px;
16  padding-bottom: 16.5px;
17  z-index: 1;
18
19  a {
20    color: #fff;
21  }
22
23  .subnavigation-inner {
24    box-sizing: border-box;
25    display: flex;
26    flex-wrap: wrap;
27    justify-content: space-between;
28    align-items: center;
29
30    .subnavi {
31      width: 100%;
32      height: auto;
33
34      & > ul {
35        display: flex;
36        flex-wrap: wrap;
37        margin: 0;
38        padding: 0;
39        height: 100%;
40        justify-content: space-between;
41
42        & > li {
43          list-style-type: none;
44          font-size: 1.6rem;
45          flex-grow: 1;
46          text-align: center;
47          color: #fff;
48        }
49      }
50    }
51  }
52}
53
54div.subnavigation02 {
55  background-color: #1bad55;
56  position: absolute;
57  width: 100%;
58  top: 100%;
59  left: 0;
60  padding-top: 16.5px;
61  padding-bottom: 16.5px;
62  z-index: 1;
63
64  a {
65    color: #fff;
66  }
67
68  .subnavigation-inner {
69    box-sizing: border-box;
70    display: flex;
71    flex-wrap: wrap;
72    justify-content: space-between;
73    align-items: center;
74
75    .subnavi {
76      width: 100%;
77      height: auto;
78
79      & > ul {
80        display: flex;
81        flex-wrap: wrap;
82        margin: 0;
83        padding: 0;
84        height: 100%;
85        justify-content: space-between;
86
87        & > li {
88          list-style-type: none;
89          font-size: 1.6rem;
90          flex-grow: 1;
91          text-align: center;
92          color: #fff;
93        }
94      }
95    }
96  }
97}

javascript
1$(function() {
2	$("span.subnavi-button").click(function () {
3		$("section.subnavigation").slideToggle();
4	});
5});
6
7$(function() {
8	$("span.subnavi-button02").click(function () {
9		$("div.subnavigation02").slideToggle();
10	});
11});

試したこと

最初は全てのサブメニューが表示されてしまったので
一つはクリックすると「section.subnavigation」となるように
もう一つはクリックすると「div.subnavigation02」となるようにしました。

行動規範の内容に同意します

回答1件

javascript
1<style>
2.subnavigation-inner:not(.active){
3display:none;
4}
5</style>
6<script>
7window.addEventListener('DOMContentLoaded', ()=>{
8  document.querySelectorAll('#nav li>span').forEach(x=>{
9    x.addEventListener('click',()=>{
10      x.nextElementSibling.querySelector('.subnavigation-inner')?.classList.toggle('active');
11    });
12  });
13});
14</script>

メニュー3とメニュー5を排他的に開く

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  document.querySelectorAll('#nav li>span').forEach(x=>{
3    x.addEventListener('click',()=>{
4      [...document.querySelectorAll('.subnavigation-inner')].forEach(y=>{
5        if(y!==x.nextElementSibling.querySelector('.subnavigation-inner')) y.classList.remove('active',);
6      });
7      x.nextElementSibling.querySelector('.subnavigation-inner')?.classList.toggle('active');
8    });
9  });
10});

投稿2021/10/11 08:00

編集2021/10/14 04:29

yambejp

総合スコア116724

soraatori

2021/10/14 03:42

ご回答ありがとうございます。クリックすると「.subnavigation-inner」以下に「active」を付与し非表示にするという内容でしょうか。ご提示いただいたコードを入力してみましたが、やはり重複してしまいトグルを開いたまま他のトグルを開くと、閉じず残ってしまいます。こちらのコードを追加するだけではなく、不要なコードを削除したり修正する必要がありますでしょうか。