Q&A
現状の動作 ( https://jsfiddle.net/ub8zeq60/ ) で既に「実現したいこと」に書かれている動作は実現できていませんか？質問者さんの抱えている問題をもう少し詳しく教えていただけませんか？
前提・実現したいこと
bootstrap4で複数ターゲットのトグルを作成したいです。
1.「ごはん」をクリックすると、「おにぎり」「お吸い物」「デザート」が開閉。
2.「おにぎり」をクリックすると「さけ」のみが開閉され、「お吸い物」「デザート」の開閉状態を維持する。
3.「お吸い物」をクリックすると「味噌汁」のみが開閉され、「おにぎり」「デザート」の開閉状態を維持する。
4.「デザート」をクリックすると「パイナップル」のみが開閉され、「おにぎり」「お吸い物」の開閉状態を維持する。
のように、複数ターゲットのトグルを作成したいです。
該当のソースコード
html
1<ul class='accordion nav flex-column'> 2 <li class='nav-item'> 3 <div class='accordion_grid'> 4 <div class='column'> 5 <a href='#all-list' class='nav-link ship_header_class' data-toggle='collapse'>ごはん</a> 6 </div> 7 </div> 8 <ul id='all-list' class='collapse show list-unstyled'> 9 <li class='nav-item'> 10 <a href='#collapse-menu0' class='nav-link' data-toggle='collapse' data-target='#collapse-menu0' aria-controls='collapse-menu0 '>おにぎり</a> 11 <ul id='collapse-menu0' class='collapse list-unstyled show' data-parent=.accordion> 12 <li> 13 <a href='#' class='nav-link'>さけ</a> 14 </li> 15 </ul> 16 </li> 17 <li class='nav-item'> 18 <a href='#collapse-menu1' class='nav-link' data-toggle='collapse' data-target='#collapse-menu1' aria-controls='collapse-menu1'>お吸い物</a> 19 <ul id='collapse-menu1' class='collapse list-unstyled list-group' data-parent=.accordion> 20 <li> 21 <a href='#' class='nav-link'>味噌汁</a> 22 </li> 23 </ul> 24 </li> 25 <li class='nav-item'> 26 <a href='#collapse-menu2' class='nav-link' data-toggle='collapse' data-target='#collapse-menu2' aria-controls='collapse-menu2'>デザート</a> 27 <ul id='collapse-menu2' class='collapse list-unstyled list-group' data-parent=.accordion> 28 <li> 29 <a href='#' class='nav-link'>パイナップル</a> 30 </li> 31 </ul> 32 </li> 33 </ul> 34 </li> 35</ul>
試したこと
data-target、aria-controlsにそれぞれユニークな値を振りましたが、上手く動作しませんでした。
補足情報（FW/ツールのバージョンなど）
html5
bootstrap4
回答1件
0
ベストアンサー
data-parent 属性を設定すると、この属性で指定された要素の配下にあるすべての折りたたみ可能な要素のうち、ひとつしか展開された状態になることが出来ません。よって、展開された状態を維持するためには、 data-parent 属性を削除すれば良いということになります (動作確認用リンク)。
Options #
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector ǀ jQuery object ǀ DOM element | false | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area. |
| toggle | boolean | true | Toggles the collapsible element on invocation |
HTML
1<ul class='accordion nav flex-column'> 2 <li class='nav-item'> 3 <div class='accordion_grid'> 4 <div class='column'> 5 <a href='#all-list' class='nav-link ship_header_class' data-toggle='collapse'>ごはん</a> 6 </div> 7 </div> 8 <ul id='all-list' class='collapse show list-unstyled'> 9 <li class='nav-item'> 10 <a href='#collapse-menu0' class='nav-link' data-toggle='collapse' data-target='#collapse-menu0' aria-controls='collapse-menu0 '>おにぎり</a> 11 <ul id='collapse-menu0' class='collapse list-unstyled show'> 12 <li> 13 <a href='#' class='nav-link'>さけ</a> 14 </li> 15 </ul> 16 </li> 17 <li class='nav-item'> 18 <a href='#collapse-menu1' class='nav-link' data-toggle='collapse' data-target='#collapse-menu1' aria-controls='collapse-menu1'>お吸い物</a> 19 <ul id='collapse-menu1' class='collapse list-unstyled list-group'> 20 <li> 21 <a href='#' class='nav-link'>味噌汁</a> 22 </li> 23 </ul> 24 </li> 25 <li class='nav-item'> 26 <a href='#collapse-menu2' class='nav-link' data-toggle='collapse' data-target='#collapse-menu2' aria-controls='collapse-menu2'>デザート</a> 27 <ul id='collapse-menu2' class='collapse list-unstyled list-group'> 28 <li> 29 <a href='#' class='nav-link'>パイナップル</a> 30 </li> 31 </ul> 32 </li> 33 </ul> 34 </li> 35</ul>
投稿2019/12/20 12:02
総合スコア14731
あなたの回答
tips
プレビュー
