質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

RyoYamane
RyoYamane

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

20閲覧

投稿2021/03/31 10:43

前提・実現したいこと

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

発生している問題

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

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

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

該当のソースコード

Js

(()=>{ 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'); } }) } }) })();

css

/* タブメニュー */ .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; } /* 2段目たぶ */ .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; }

html

<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/ツールのバージョンなど)

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。