javascript 複数階層 タブ切り替えメニューの切替時の表示を解決したい

Question

前提・実現したいこと

JavaScriptを使用して、複数階層（第３階層まで）のタグメニュー実装を行いたいです。

発生している問題

下記、Gifのように第1階層の選択時の色は、選択エリアごとに変わるものの、
選択したことによって出現した第2階層のメニューは、選択エリアごとに消えない。
https://gyazo.com/383699c4017be9011999dd60554c615d

第１階層選択時の色のように、第2階層のメニューも選択外のところは消したい。

何卒よろしくお願いいたします。

該当のソースコード

(()=>{

window.addEventListener('load', () => {
  const tabMenu = document.getElementById("js-tab")
  const menuDetail = tabMenu.querySelectorAll("[data-id]")
  const menuMoreDetail = tabMenu.querySelectorAll("[data-menu]")
  console.log(menuMoreDetail)
  for(let i = 0; i < menuDetail.length; i++) {
    //タブメニュークリック時
    
    menuDetail[i].addEventListener('click', (e) => {
      const init = () => {
        menuMoreDetail[i].style.display = 'block';
      };
      init();

      //クリックされた要素（メニュー要素）を取得
      let currentMenu = e.currentTarget;
      //ターゲットとなる要素（タブメニューdata属性ちと等しいid値を持つコンテンツ要素を取得
      let currentContent = document.getElementById(currentMenu.dataset.id);
      console.log(currentContent)

      // すべてのタブメニューの'is-active'クラスを削除
      for(let i = 0; i < menuDetail.length; i++) {
        menuDetail[i].classList.remove('is-active');
      }
      // クリックしたタブメニューに'is-active'クラスを追加
      currentMenu.classList.add('is-active');

       // タブコンテンツを非アクティブにする
       for(let i = 0; i < menuMoreDetail.length; i++) {
         menuMoreDetail[i].classList.remove('is-active');
       }
       // 対象コンテンツ(指定したIDの要素があったら)を表示させる
       if(currentContent !== null) {
         currentContent.classList.add('is-active');
       } else {
         currentContent.classList.remove('is-active');
       }

    })
  }    
})
})();

/* タブメニュー */
.tab-menu {
  display: flex;
  margin: 0 -5px;
}

.tab-menu__item {
  box-sizing: border-box;
  width: -webkit-fill-available;
}


.tab-trigger { /* label */
  text-align: left;
  cursor: pointer;
  display: block;
  padding: 10px;
  border: 1px solid #ccc;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  background-color: lightgray;
  position: relative;
}

.tab-trigger.is-active {
  background-color: darkgoldenrod;
  
}

/* ２段目たぶ */
.tab-menu-detail{
  display: none;
}

.tab-menu-detail.is-active {
  display: flex;
}

.second-menu {
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 6px;
    border: 2px solid dimgray;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    background-color: lightslategrey;
    position: relative;
    
}

<div id="js-tab">
<ul class="tab-menu" >
  <li class="tab-menu__item"><span class="tab-trigger js-tab-trigger is-active" data-id="tab01">予約管理</span>
    <ul class="tab-menu-detail" id="tab01">
        <li class="second-menu js-tab-target " data-menu="1">スケジュール確認</li>
        <li class="second-menu js-tab-target " data-menu="2">定休日選択</li>
    </ul>
  </li>

  <li class="tab-menu__item"><span class="tab-trigger js-tab-trigger" data-id="tab02">メニュー作成</span>
    <ul class="tab-menu-detail" id="tab02">
        <li class="second-menu js-tab-target is-active" data-menu="3">新規メニュー作成</li>
        <li class="second-menu js-tab-target " data-menu="4">既存メニュー編集・削除</li>
    </ul>
  </li>

  <li class="tab-menu__item"><span class="tab-trigger js-tab-trigger" data-id="tab03">クーポン作成</span>
    <ul class="tab-menu-detail" id="tab03">
        <li class="second-menu js-tab-target " data-menu="5">新規クーポン作成</li>
        <li class="second-menu js-tab-target " data-menu="6">既存クーポン編集・削除</li>
    </ul>
  </li>

  <li class="tab-menu__item"><span class="tab-trigger js-tab-trigger" data-id="tab04">レビュー確認</span>
    <ul class="tab-menu-detail" id="tab04">
        <li class="second-menu js-tab-target " data-menu="7">新規メニュー作成</li>
        <li class="second-menu js-tab-target " data-menu="8">既存メニュー編集・削除</li>
    </ul>
  </li>
</ul>
<!-- .tab-menu -->

<!-- .2段目めにゅ -->


<!-- .2段目めにゅ -->
<div class="tab-content">
  <div class="tab-content__item js-tab-target is-active" id="tab01">
    <p>タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。タブ1のコンテンツが入ります。</p>
  </div><!-- .tab-content__item -->
  <div class="tab-content__item js-tab-target" id="tab02">
    <p>タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。タブ2のコンテンツが入ります。</p>
  </div><!-- .tab-content__item -->
  <div class="tab-content__item js-tab-target" id="tab03">
    <p>タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。</p>
  </div><!-- .tab-content__item -->
  <div class="tab-content__item js-tab-target" id="tab04">
    <p>タブ4のコンテンツが入ります。タブ4のコンテンツが入ります。タブ4のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。</p>
  </div><!-- .tab-content__item -->
</div><!-- .tab-content -->
</div>

試したこと

jsファイルにif文でelse以下を追加し、removeする記述を追加してみたが、特に変化なし。

 // 対象コンテンツ(指定したIDの要素があったら)を表示させる
       if(currentContent !== null) {
         currentContent.classList.add('is-active');
       } else {
         currentContent.classList.remove('is-active');
       }

参考にしたページ

https://blog.pranktone.net/web/javascript/20200304150200.html

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

ここにより詳細な情報を記載してください。

Answer 1

menuMoreDetailは[data-menu]なのでulです。
currentContentはdocument.getElementById(currentMenu.dataset.id)なのでliです。

上の二つが違うものなので、

       // タブコンテンツを非アクティブにする
       for(let i = 0; i < menuMoreDetail.length; i++) {
         menuMoreDetail[i].classList.remove('is-active');            //←これと
       }
       // 対象コンテンツ(指定したIDの要素があったら)を表示させる
       if(currentContent !== null) {
         currentContent.classList.add('is-active');                  //←これが違うもの

というのが原因です。

---

解決方法ですが、いろいろあると思いますが、手っ取り早いのは、

/* .tab-menu-detail.is-active { */
.is-active+.tab-menu-detail {
  display: flex;
}

とCSSで解決する方法でしょうか。

ただ、多段メニューにするなら少し考えないといけないと思います。

Comments

[RyoYamane]

お忙しいところご回答ありがとうございます。
ご指摘いただきましたのCSS追加とJsのfori以下を削除したことで、
下記Gifの通り挙動確認できました。
```
https://gyazo.com/fe468d92b30dc2cbd8a2015682c4b47a
```
また今回うまく動作しなかった原因は
ulとliが別物にもかかわらず指定していたため、動作が思ったようにいかなかったということですね！
理解しました。
このあと第２階層のクリックしたらコンテンツ表示されるというところは、
これからチャレンジしてみたいと思います！

ちなみに、コメントいただいた内容で、
＞ただ、多段メニューにするなら少し考えないといけないと思います
とありますが、
私の作業イメージだと、『liのidを取得→イベント発火→紐付けたdata属性のコンテンツを表示→他の要素はremoveする』
上記イメージしておりますが、こちらだと実装は難しいイメージでしょうか？

ご回答いただけましたら、幸いでございます。
よろしくお願いいたします。

[Lhankor_Mhy]

いえ、そのイメージでいいと思うのですが、この回答のようにCSSで対処する場合には構造を考え直さないといけないかな、と感じています。

というのも、RyoYamane さんの JavaScript は data-id などを使ってHTML構造に依存しない形になっていますが、私が回答で提示した .is-active+.tab-menu-detail のようなセレクタはHTML構造に依存しているので、複雑化すると矛盾してしまうような気がするのです。