Convert Bootstrap 3.x Liste-Gruppe zu Bootstrap 4

Question

Das Menü unten arbeitet an Bootstrap 4. Wenn ich jedoch auf ein Listengruppenelement klicke, wird das bereits reduzierte Element nicht geschlossen.

<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> 

Answer 1

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

In Bootstrap 4.x wurde panel in card geändert. Ersetzen Sie die panel in Ihrem Code mit card, und das Akkordeon wird wie erwartet ...

<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