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

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

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

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

JavaScript

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

3857閲覧

Bootstrap4 多階層ドロップダウン

goldthisplay

総合スコア14

HTML5

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

JavaScript

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2018/11/02 03:48

編集2018/11/02 12:06

前提・実現したいこと

Bootstrap4で多階層ドロップダウンを実装したいです。HTMLの記述はJinja2を使用しています。

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

公式のドキュメントの日本語訳を見ながらHTMLを書いてみましたが、どの年度のリンクをクリックしても2018のドロップライトリストが表示されます。例えば、id="2017"のa要素をクリックすれば、aria-labelledby="2017"のdiv要素内に配置したリストが表示されると認識しているのですが、それが正しいのか分かりません。
イメージ説明

該当のソースコード

HTML

1<ul class="navbar-nav mr-auto"> 2 <li class="nav-item dropdown"> 3 <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Month</a> 4 <div class="dropdown-menu dropright" aria-labelledby="navbarDropdown"> 5 {% for year in list_of_year %} 6 <a href="#" role="button" class="dropdown-toggle dropdown-item" id="{{year}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{year}}</a> 7 <div class="dropdown-menu" aria-labelledby="{{year}}"> 8 <a class="dropdown-item disabled" href="/month/{{year}}/January" id="01">January</a> 9 <a class="dropdown-item disabled" href="/month/{{year}}/February" id="02">February</a> 10 <a class="dropdown-item disabled" href="/month/{{year}}/March" id="03">March</a> 11 <a class="dropdown-item disabled" href="/month/{{year}}/April" id="04">April</a> 12 <a class="dropdown-item disabled" href="/month/{{year}}/May" id="05">May</a> 13 <a class="dropdown-item disabled" href="/month/{{year}}/June" id="06">June</a> 14 <a class="dropdown-item disabled" href="/month/{{year}}/July" id="07">July</a> 15 <a class="dropdown-item disabled" href="/month/{{year}}/August" id="08">August</a> 16 <a class="dropdown-item disabled" href="/month/{{year}}/September" id="09">September</a> 17 <a class="dropdown-item disabled" href="/month/{{year}}/October" id="10">October</a> 18 <a class="dropdown-item disabled" href="/month/{{year}}/November" id="11">November</a> 19 <a class="dropdown-item disabled" href="/month/{{year}}/December" id="12">December</a> 20 </div> 21 {% endfor %} 22 </div> 23 </li> 24</ul>

リストlist_of_yearの中身は["2018", "2017", "2016", "2015"]となっていて、最終的に生成されるHTMLは{{year}}の部分をリストの中身で置き換えたものになります。

###試したこと
idがアルファベットから始まるようにし、またidが唯一に識別できるものにしましたが、以下のコードでは上と結果が変わりませんでした。

HTML

1<ul class="navbar-nav mr-auto"> 2 <li class="nav-item dropdown"> 3 <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Month</a> 4 <div class="dropdown-menu dropright" aria-labelledby="navbarDropdown"> 5 {% for year in list_of_year %} 6 <a href="#" role="button" class="dropdown-toggle dropdown-item" id="list{{year}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{year}}</a> 7 <div class="dropdown-menu" aria-labelledby="list{{year}}"> 8 <a class="dropdown-item disabled" href="/month/{{year}}/January" id="list{{year}}01">January</a> 9 <a class="dropdown-item disabled" href="/month/{{year}}/February" id="list{{year}}02">February</a> 10 <a class="dropdown-item disabled" href="/month/{{year}}/March" id="list{{year}}03">March</a> 11 <a class="dropdown-item disabled" href="/month/{{year}}/April" id="list{{year}}04">April</a> 12 <a class="dropdown-item disabled" href="/month/{{year}}/May" id="list{{year}}05">May</a> 13 <a class="dropdown-item disabled" href="/month/{{year}}/June" id="list{{year}}06">June</a> 14 <a class="dropdown-item disabled" href="/month/{{year}}/July" id="list{{year}}07">July</a> 15 <a class="dropdown-item disabled" href="/month/{{year}}/August" id="list{{year}}08">August</a> 16 <a class="dropdown-item disabled" href="/month/{{year}}/September" id="list{{year}}09">September</a> 17 <a class="dropdown-item disabled" href="/month/{{year}}/October" id="list{{year}}10">October</a> 18 <a class="dropdown-item disabled" href="/month/{{year}}/November" id="list{{year}}11">November</a> 19 <a class="dropdown-item disabled" href="/month/{{year}}/December" id="list{{year}}12">December</a> 20 </div> 21 {% endfor %} 22 </div> 23 </li> 24</ul>

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

Bootstrap4.1.3
jinja2

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/11/02 07:50

{{year}}とありますが、サーバーサイドのプログラムやフレームワークをお使いでしたらそちらもタグと環境情報に追記してください。
guest

回答2

0

おそらくidではないかと。
「1ページ内に同じIDは1つ」の原則があるので、同じIDがあると特定のものになりません。
年度でわかれているなら年度も各月のIDに含めたほうが良いでしょう。

あと、数字から始まる命名は推奨されません(正しく認識されないこともあるようです)

何かしらアルファベット名称に続けてください。

投稿2018/11/02 07:53

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

goldthisplay

2018/11/02 11:26

回答ありがとうございます。idの先頭にアルファベットを追加し、ページ内のidをすべて唯一のものにしたのですが、改善しませんでした。また、div要素のaria-labelledbyを直上のa要素のidと異なる値にしても同じ状態でしたので、「a要素のidと対応したaria-labelledbyが設定されたdiv要素が表示される」というわけではないようです。
m.ts10806

2018/11/02 11:38

修正後のコードを追記してください。
goldthisplay

2018/11/02 13:50

コードを追記しました。
guest

0

自己解決

stackoverflowの回答を参考にして修正するとうまく表示できました。この方法は新しくJavascriptとCSSの記述を追加しているので、素のBootstrapで多階層ドロップダウンを実装するのは難しいのかもしれません。liタグ内のaタグのリンクが上手く動作しない新しい問題が発生していますが、そちらは別の質問に投稿したいと思います。

投稿2018/11/03 06:34

goldthisplay

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問