JavaScriptにてドロップダウンメニューでサブリストを歯抜けで作成した際に表示されるサブリストをずれないように表示させたい

前提・実現したいこと

JavaScriptにてドロップダウンメニューを作成中です。
希望としては下記の様に「メインリスト」にマウスがホバーした時
「サブリスト」が表示されるようにしたいです。

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

「メインリスト」と「サブリスト」の数が同じであればドロップダウンメニューが出来るのですが歯抜けの様な状態にすると別な「メインリスト02」にマウスがホバーした時「サブリスト」が表示されてしまいます。

該当のソースコード

html
1<body>
2  <div class="wrap">
3    <div class="ly_box">
4      <ul class="ly_horizontal">
5        <li><a href="#">メインリスト０１</a>
6          <ul>
7            <li><a href="#">サブリスト０１</a></li>
8            <li><a href="#">サブリスト０２</a></li>
9            <li><a href="#">サブリスト０３</a></li>
10          </ul>
11          <!-- /.js_sub -->
12        </li>
13        <li><a href="#">メインリスト０２</a></li>
14        <li><a href="#">メインリスト０３</a>
15          <ul>
16            <li><a href="#">サブリスト０１</a></li>
17            <li><a href="#">サブリスト０２</a></li>
18            <li><a href="#">サブリスト０３</a></li>
19          </ul>
20          <!-- /.js_sub -->
21        </li>
22        <li><a href="#">メインリスト０４</a></li>
23        <li><a href="#">メインリスト０５</a></li>
24      </ul>
25      <!-- /.ly_horizontal -->
26    </div>
27    <!-- /.ly_box -->
28  </div>
29  <!-- /.wrap -->
30  <script src="main.js"></script>
31</body>
32</html>

css
1body, ul {
2  margin: 0;
3  padding: 0;
4}
5
6body {
7  border-top: 5px solid rgb(0, 0, 0);
8  background: rgb(245, 245, 245);
9}
10
11ul {
12  list-style: none;
13}
14
15.wrap {
16  width:750px;
17  margin: 20px auto;
18}
19
20.ly_box {
21  height: 250px;
22  margin-bottom: 20px;
23}
24
25.ly_horizontal {
26  display: flex;
27}
28
29.ly_horizontal li {
30  position: relative;
31}
32
33.hidden {
34  height: 0px;
35  visibility: hidden;
36}
37
38.ly_horizontal a {
39  display: block;
40  width: 150px;
41  height: 50px;
42  line-height: 50px;
43  text-align: center;
44  text-decoration: none;
45  color: rgb(0, 0, 0);
46  background: rgb(220, 220, 220);
47}
48
49.ly_horizontal a:hover {
50  background: rgb(200, 200, 200);
51}

JavaScript
1const mainList = document.querySelectorAll('.ly_horizontal > li');
2const subList = document.querySelectorAll('.ly_horizontal ul');
3
4subList.forEach(list =>{
5  list.classList.add('hidden');
6});
7
8mainList.forEach((mlist, index) =>{
9  mlist.addEventListener('mouseover', ()=>{
10    subList.forEach((slist, index2)=>{
11      if(index === index2){
12        slist.classList.remove('hidden');
13      };
14    });
15  });
16
17  mlist.addEventListener('mouseout', ()=>{
18    subList.forEach((slist, index2)=>{
19      slist.classList.add('hidden');
20    });
21  });
22});
23

試したこと

JavaScript
1if(index === index2){
2        slist.classList.remove('hidden');
3      };

「index」「index2」の値で比べているのでこの状態になっている事は分かるのですが、ここからどうすればずれなく表示させる事が出来るか分かりませんでした。

つたない説明で申し訳ありませんがご教授お願い致します。

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

端末：Windows10 Home
テキストエディタ：VS Code
ブラウザ：Chrome

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

回答2件

ベストアンサー

「index」「index2」の値で比べているのでこの状態になっている事は分かる

とのことなので、原因はしっかり把握されていることと思います。
なので、配列の添え字で判断するのではなく、mouseoverした際のElementから、自身の子要素のULを抽出する方針に変えましょう。

javascript
1mainList.forEach((mlist, index) =>{
2  // mouseoverが発生した際に主体をイベントリスナを付与した要素にしたいので、
3  // コールバック関数をラムダ式からfunctionに変える。
4  // そうするとマウスオーバーしたli要素がthisになる。
5  mlist.addEventListener('mouseover', function(e){
6    this.querySelectorAll('ul') // mouseoverしたli要素の子要素であるulを取得
7      .forEach( e2 => e2.classList.remove('hidden'));  // querySelectorAllで取得する理由は、サブメニューが存在しない要素にマウスオーバーした際のnullチェックを省略するため
8  });
9  // mouseout側も同様に実装
10  mlist.addEventListener('mouseout', function(e){
11      this.querySelectorAll('ul').forEach( e2 => e2.classList.add('hidden'));
12  });
13});

codepenでのデモ

投稿2021/06/11 08:23

hope_mucci

総合スコア4447

m_miura1980

2021/06/11 09:20

ご回答いただき誠にありがとうございます。「コールバック関数をラムダ式からfunctionに変える」という部分はまだ未熟で完全な理解には至ってはいませんが、これを元に再度勉強し直したいと思います。理想通りの動きになりました。本当にありがとうございました。

hope_mucci

2021/06/11 09:35

問題が解決できて何よりです。 functionとラムダ式（アロー関数）とthisの関係については、手始めに以下のような記事を読んでみて、thisに入るものが違うんだぞということを理解してから、深い仕様を追いかけるのが良いかと思います。 https://qiita.com/haduki1208/items/f9cd375d5af157b00af9 https://qiita.com/takkyun/items/c6e2f2cf25327299cf03

m_miura1980

2021/06/11 09:38

「functionとラムダ式（アロー関数）とthisの関係について」ご丁寧にリンク先まで教えて頂きありがとうございます。実は「サブリスト」がある「ul」だけを特定する方法が分からず困っていました。本当にありがとうございました。

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

css
1.ly_box ul{
2list-style:none;
3padding:0;
4}
5.ly_box> ul> li >a,.ly_box> ul> li >ul> li{
6background-Color:lightgray;
7}
8.ly_box> ul>li>a:hover,.ly_box> ul> li >ul> li:hover{
9background-Color:gray;
10}
11.ly_box> ul{
12display:flex;
13}
14.ly_box> ul>li:not(:hover)>ul{
15display:none;
16}