將引導程序3.x列表組轉換爲引導程序4

以下菜單正在處理引導程序4.但是，當我單擊列表組項目時，已經摺疊的項目將不會關閉。將引導程序3.x列表組轉換爲引導程序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>

來源

2017-05-10 RoRFan

引導3.X是dependent on the panel class for accordion behavior。

在Bootstrap 4.x中，panel已更改爲card。在你的代碼card更換panel，並如期手風琴將工作...

<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

來源

2017-05-10 10:47:31 ZimSystem

將引導程序3.x列表組轉換爲引導程序4

回答

相關問題