Twitter bootstrap 使用bootstrap 4的Veritical可折叠菜单项

使用Bootstrap4，我试图呈现简单的垂直可折叠菜单

<div class="row">
    <div class="col-3">
        <div id="accordion">
            <div>
                <div id="tags">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTags" aria-expanded="true" aria-controls="collapseTags">
                        <b>Tags</b>
                    </button>
                </div>
                <div id="collapseTags" class="collapse show" aria-labelledby="tags" data-parent="#accordion">
                    <div>
                        <ul>
                            <li class="nav-item"><a data-toggle="pill" href="#tag1">Tag 1</a></li>
                            <li class="nav-item"><a data-toggle="pill" href="#tag2">Tag 2</a></li>                            
                            <li class="nav-item"><a data-toggle="pill" href="#tag3">Tag 3</a></li>                                                        
                        </ul>
                    </div>
                </div>
            </div>
            <div>
                <div id="tagAttributes">
                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTagAttributes" aria-expanded="false" aria-controls="collapseTagAttributes">
                        <b>Attributes</b>
                    </button>
                </div>
                <div id="collapseTagAttributes" class="collapse" aria-labelledby="tagAttributes" data-parent="#accordion">
                    <div>
                        <ul>
                            <li><a data-toggle="pill" href="#attribut1">attribut 1</a></li>
                            <li><a data-toggle="pill" href="#attribut2">attribut 2</a></li>
                            <li><a data-toggle="pill" href="#attribut3">attribut 3</a></li>                            
                            <li><a data-toggle="pill" href="#attribut4">attribut 4</a></li>                                                        
                            <li>
                                <a data-toggle="pill" href="#subattribute">Sub Attribute</a>
                                <ul>
                                    <li><a data-toggle="pill" href="#sub1">Sub 1</a></li>
                                    <li><a data-toggle="pill" href="#sub2">Sub 2</a></li>                                    
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content">
            <div class="tab-pane fade" id="tag1" role="tabpanel">tag1</div>
            <div class="tab-pane fade" id="tag2" role="tabpanel">tag2</div>
            <div class="tab-pane fade" id="tag3" role="tabpanel">tag3</div>
            <div class="tab-pane fade" id="attribut1" role="tabpanel">attribut 1</div>
            <div class="tab-pane fade" id="attribut2" role="tabpanel">attribut 2</div>
            <div class="tab-pane fade" id="attribut3" role="tabpanel">attribut 3</div>
            <div class="tab-pane fade" id="attribut4" role="tabpanel">attribut 4</div>
            <div class="tab-pane fade" id="subattribute" role="tabpanel">sub attributes</div>
            <div class="tab-pane fade" id="sub1" role="tabpanel">sub 1</div>
            <div class="tab-pane fade" id="sub2" role="tabpanel">sub 2</div>
        </div>
    </div>
</div>

标签





属性












tag1
tag2
tag3
属性1
属性2
属性3
属性4
子属性
子1
次级2

问题
选项卡窗格不会第二次显示。例如单击标记1，它显示标记1对应的选项卡窗格。然后单击标记2，它将显示标记2对应的选项卡窗格。现在再次单击标记1，它不会显示相应的选项卡窗格

如果我添加

…`。但是，这样做会删除菜单项和子菜单项的项目符号

如何使用每个菜单项的项目符号来实现此功能？切换工作需要
.nav
。所以，您可以添加另一个类来撤消隐藏列表中项目符号的导航样式

<ul class="nav nav-list flex-column">
  <li class="nav-item"><a data-toggle="pill" href="#tag1">Tag 1</a></li>
  <li class="nav-item"><a data-toggle="pill" href="#tag2">Tag 2</a></li>                     
  <li class="nav-item"><a data-toggle="pill" href="#tag3">Tag 3</a></li>
</ul>

左侧填充：40px
和
列表样式：disc
是默认值，如果您没有
.nav
样式。
需要
.nav
才能切换工作。所以，您可以添加另一个类来撤消隐藏列表中项目符号的导航样式

<ul class="nav nav-list flex-column">
  <li class="nav-item"><a data-toggle="pill" href="#tag1">Tag 1</a></li>
  <li class="nav-item"><a data-toggle="pill" href="#tag2">Tag 2</a></li>                     
  <li class="nav-item"><a data-toggle="pill" href="#tag3">Tag 3</a></li>
</ul>

padding left:40px
和
列表样式：disc
是默认值，如果您没有
.nav
样式。
。但我也必须使用
！重要信息
要让它工作起来很奇怪，当我测试它时，它并不需要它。它工作起来了。但我也必须使用
！重要信息
要让它工作起来很奇怪，当我测试它时，它并不需要。