質問編集履歴
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -86,4 +86,36 @@
|
|
|
86
86
|
ここに問題に対して試したことを記載してください。
|
|
87
87
|
|
|
88
88
|
### 補足情報（FW/ツールのバージョンなど）
|
|
89
|
-
Bootstrap4
|
|
89
|
+
Bootstrap4
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
### 追記
|
|
93
|
+
```
|
|
94
|
+
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
|
|
95
|
+
|
|
96
|
+
<div th:each="node, status : ${nodes}" class="card" th:with="collapseId = 'collapse' + ${status.count}">
|
|
97
|
+
<div class="card-header" role="tab" id="headingOne">
|
|
98
|
+
<h5 class="mb-0">
|
|
99
|
+
<a class="text-body d-block p-3 m-n3" data-toggle="collapse" th:href="'#' + ${collapseId}"
|
|
100
|
+
role="button" aria-expanded="false" th:attr="aria-controls= ${collapseId}">
|
|
101
|
+
[[${node.key}]]
|
|
102
|
+
</a>
|
|
103
|
+
</h5>
|
|
104
|
+
</div><!-- /.card-header -->
|
|
105
|
+
<div th:id="${collapseId}" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
|
|
106
|
+
<div class="card-body">
|
|
107
|
+
<a th:each="value : ${node.value}" class="dropdown-item">[[${value}]] </a>
|
|
108
|
+
</div><!-- /.card-body -->
|
|
109
|
+
</div><!-- /.collapse -->
|
|
110
|
+
</div><!-- /.card -->
|
|
111
|
+
```
|
|
112
|
+
としたことでこの問題は解決できました。
|
|
113
|
+
ありがとうございます。
|
|
114
|
+
|
|
115
|
+
さらにもしわかれば教えていただきたいのですが
|
|
116
|
+
```
|
|
117
|
+
a[data-toggle="collapse"] に、
|
|
118
|
+
aria-expanded="false" 属性（支援技術に要素の開閉の状態を伝える）
|
|
119
|
+
```
|
|
120
|
+
という記載があったのでaria-expanded="false"を設定してみたのですが初期状態でアコーディオンが開かれた状態のままでした。
|
|
121
|
+
初期で閉じておくにはこの指定の仕方ではだめなのでしょうか？
|