質問編集履歴

3

コードの追加

2018/11/02 12:06

投稿

zkp
zkp

スコア14

test CHANGED
File without changes
test CHANGED
@@ -72,6 +72,66 @@
72
72
 
73
73
 
74
74
 
75
+
76
+
77
+ ###試したこと
78
+
79
+ idがアルファベットから始まるようにし、またidが唯一に識別できるものにしましたが、以下のコードでは上と結果が変わりませんでした。
80
+
81
+ ```HTML
82
+
83
+ <ul class="navbar-nav mr-auto">
84
+
85
+ <li class="nav-item dropdown">
86
+
87
+ <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Month</a>
88
+
89
+ <div class="dropdown-menu dropright" aria-labelledby="navbarDropdown">
90
+
91
+ {% for year in list_of_year %}
92
+
93
+ <a href="#" role="button" class="dropdown-toggle dropdown-item" id="list{{year}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{year}}</a>
94
+
95
+ <div class="dropdown-menu" aria-labelledby="list{{year}}">
96
+
97
+ <a class="dropdown-item disabled" href="/month/{{year}}/January" id="list{{year}}01">January</a>
98
+
99
+ <a class="dropdown-item disabled" href="/month/{{year}}/February" id="list{{year}}02">February</a>
100
+
101
+ <a class="dropdown-item disabled" href="/month/{{year}}/March" id="list{{year}}03">March</a>
102
+
103
+ <a class="dropdown-item disabled" href="/month/{{year}}/April" id="list{{year}}04">April</a>
104
+
105
+ <a class="dropdown-item disabled" href="/month/{{year}}/May" id="list{{year}}05">May</a>
106
+
107
+ <a class="dropdown-item disabled" href="/month/{{year}}/June" id="list{{year}}06">June</a>
108
+
109
+ <a class="dropdown-item disabled" href="/month/{{year}}/July" id="list{{year}}07">July</a>
110
+
111
+ <a class="dropdown-item disabled" href="/month/{{year}}/August" id="list{{year}}08">August</a>
112
+
113
+ <a class="dropdown-item disabled" href="/month/{{year}}/September" id="list{{year}}09">September</a>
114
+
115
+ <a class="dropdown-item disabled" href="/month/{{year}}/October" id="list{{year}}10">October</a>
116
+
117
+ <a class="dropdown-item disabled" href="/month/{{year}}/November" id="list{{year}}11">November</a>
118
+
119
+ <a class="dropdown-item disabled" href="/month/{{year}}/December" id="list{{year}}12">December</a>
120
+
121
+ </div>
122
+
123
+ {% endfor %}
124
+
125
+ </div>
126
+
127
+ </li>
128
+
129
+ </ul>
130
+
131
+ ```
132
+
133
+
134
+
75
135
  ### 補足情報(FW/ツールのバージョンなど)
76
136
 
77
137
  Bootstrap4.1.3

2

詳細を追加

2018/11/02 12:06

投稿

zkp
zkp

スコア14

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- Bootstrap4で多階層ドロップダウンを実装したいです。
5
+ Bootstrap4で多階層ドロップダウンを実装したいです。HTMLの記述はJinja2を使用しています。
6
6
 
7
7
  ### 発生している問題・エラーメッセージ
8
8
 
@@ -68,10 +68,12 @@
68
68
 
69
69
  ```
70
70
 
71
-
71
+ リストlist_of_yearの中身は["2018", "2017", "2016", "2015"]となっていて、最終的に生成されるHTMLは{{year}}の部分をリストの中身で置き換えたものになります。
72
72
 
73
73
 
74
74
 
75
75
  ### 補足情報(FW/ツールのバージョンなど)
76
76
 
77
77
  Bootstrap4.1.3
78
+
79
+ jinja2

1

コードの視認性を改善

2018/11/02 11:04

投稿

zkp
zkp

スコア14

test CHANGED
File without changes
test CHANGED
@@ -20,51 +20,51 @@
20
20
 
21
21
  <ul class="navbar-nav mr-auto">
22
22
 
23
- <li class="nav-item dropdown">
23
+ <li class="nav-item dropdown">
24
24
 
25
- <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Month</a>
25
+ <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Month</a>
26
26
 
27
- <div class="dropdown-menu dropright" aria-labelledby="navbarDropdown">
27
+ <div class="dropdown-menu dropright" aria-labelledby="navbarDropdown">
28
28
 
29
- {% for year in list_of_year %}
29
+ {% for year in list_of_year %}
30
30
 
31
- <a href="#" role="button" class="dropdown-toggle dropdown-item" id="{{year}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{year}}</a>
31
+ <a href="#" role="button" class="dropdown-toggle dropdown-item" id="{{year}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{year}}</a>
32
32
 
33
- <div class="dropdown-menu" aria-labelledby="{{year}}">
33
+ <div class="dropdown-menu" aria-labelledby="{{year}}">
34
34
 
35
- <a class="dropdown-item disabled" href="/month/{{year}}/January" id="01">January</a>
35
+ <a class="dropdown-item disabled" href="/month/{{year}}/January" id="01">January</a>
36
36
 
37
- <a class="dropdown-item disabled" href="/month/{{year}}/February" id="02">February</a>
37
+ <a class="dropdown-item disabled" href="/month/{{year}}/February" id="02">February</a>
38
38
 
39
- <a class="dropdown-item disabled" href="/month/{{year}}/March" id="03">March</a>
39
+ <a class="dropdown-item disabled" href="/month/{{year}}/March" id="03">March</a>
40
40
 
41
- <a class="dropdown-item disabled" href="/month/{{year}}/April" id="04">April</a>
41
+ <a class="dropdown-item disabled" href="/month/{{year}}/April" id="04">April</a>
42
42
 
43
- <a class="dropdown-item disabled" href="/month/{{year}}/May" id="05">May</a>
43
+ <a class="dropdown-item disabled" href="/month/{{year}}/May" id="05">May</a>
44
44
 
45
- <a class="dropdown-item disabled" href="/month/{{year}}/June" id="06">June</a>
45
+ <a class="dropdown-item disabled" href="/month/{{year}}/June" id="06">June</a>
46
46
 
47
- <a class="dropdown-item disabled" href="/month/{{year}}/July" id="07">July</a>
47
+ <a class="dropdown-item disabled" href="/month/{{year}}/July" id="07">July</a>
48
48
 
49
- <a class="dropdown-item disabled" href="/month/{{year}}/August" id="08">August</a>
49
+ <a class="dropdown-item disabled" href="/month/{{year}}/August" id="08">August</a>
50
50
 
51
- <a class="dropdown-item disabled" href="/month/{{year}}/September" id="09">September</a>
51
+ <a class="dropdown-item disabled" href="/month/{{year}}/September" id="09">September</a>
52
52
 
53
- <a class="dropdown-item disabled" href="/month/{{year}}/October" id="10">October</a>
53
+ <a class="dropdown-item disabled" href="/month/{{year}}/October" id="10">October</a>
54
54
 
55
- <a class="dropdown-item disabled" href="/month/{{year}}/November" id="11">November</a>
55
+ <a class="dropdown-item disabled" href="/month/{{year}}/November" id="11">November</a>
56
56
 
57
- <a class="dropdown-item disabled" href="/month/{{year}}/December" id="12">December</a>
57
+ <a class="dropdown-item disabled" href="/month/{{year}}/December" id="12">December</a>
58
58
 
59
- </div>
59
+ </div>
60
60
 
61
- {% endfor %}
61
+ {% endfor %}
62
62
 
63
- </div>
63
+ </div>
64
64
 
65
- </li>
65
+ </li>
66
66
 
67
- </ul>
67
+ </ul>
68
68
 
69
69
  ```
70
70