将 Bootstrap 3.x 列表组转换为 Bootstrap 4答案

【问题标题】：Convert Bootstrap 3.x list-group to Bootstrap 4将 Bootstrap 3.x 列表组转换为 Bootstrap 4
【发布时间】：2017-05-10 09:49:05
【问题描述】：

下面的菜单适用于 Bootstrap 4。但是，当我单击列表组项目时，已经折叠的项目不会关闭。

<div id="menu">
<div class="panel list-group">
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#sm" data-parent="#menu">MESSAGES <span class="label label-info">5</span> <span class="glyphicon glyphicon-envelope pull-right"></span></a>
    <div id="sm" class="sublinks collapse">
        <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> inbox</a>
        <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> sent</a>
    </div>
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#sl" data-parent="#menu">TASKS <span class="glyphicon glyphicon-tag pull-right"></span></a>
    <div id="sl" class="sublinks collapse">
        <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> saved tasks</a>
        <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> add new task</a>
    </div>
    <a href="#" class="list-group-item">ANOTHER LINK ...<span class="glyphicon glyphicon-stats pull-right"></span></a>
</div>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

Bootstrap 3.x 是 dependent on the panel class for accordion behavior。

在 Bootstrap 4.x 中，panel 已更改为 card。将代码中的panel 替换为card，手风琴将按预期工作...

<div id="menu">
    <div class="card list-group"> <a href="#" class="list-group-item" data-toggle="collapse" data-target="#sm" data-parent="#menu">MESSAGES <span class="badge badge-info">5</span> <span class="glyphicon glyphicon-envelope float-right"></span></a>
        <div id="sm" class="sublinks collapse"> <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> inbox</a>
            <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> sent</a>
        </div> <a href="#" class="list-group-item" data-toggle="collapse" data-target="#sl" data-parent="#menu">TASKS <span class="glyphicon glyphicon-tag float-right"></span></a>
        <div id="sl" class="sublinks collapse"> <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> saved tasks</a>
            <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> add new task</a>
        </div> <a href="#" class="list-group-item">ANOTHER LINK ...<span class="glyphicon glyphicon-stats float-right"></span></a>
    </div>

Demo

【讨论】：