初始使用Bootstrap Collapse組件不起作用

Question

我有一個使用Bootstrap的應用程序。我需要使用Bootstrap Collapse component。我創建了一個Bootply來演示我的問題here。我的代碼如下所示：

<div id="items-group" class="form-group"> 
    <div data-toggle="collapse" data-parent="#items-group" data-target="#items-list" aria-expanded="true" aria-controls="items-list" class="collapsable-group-header"> 
    <ul class="list-inline no-padding-below" style="margin-bottom:0;"> 
     <li><span class="glyphicon glyphicon-chevron-down"></span></li> 
     <li class="no-padding-x"> 
     <h5 style="margin:0;">Items <span>(<button type="button" class="btn btn-link btn-link-padding" onclick="selectAll('items-list')">choose all</button>)</span></h5> 
     </li> 
    </ul> 
    </div> 


    <div id="items-list" style="padding-left:32px;"> 
    <label style="font-weight:normal;"> 
     <input type="checkbox"> 
     <span>Item A</span> 
    </label><br> 
    <label style="font-weight:normal;"> 
     <input type="checkbox"> 
     <span>Item B</span> 
    </label><br> 
    <label style="font-weight:normal;"> 
     <input type="checkbox"> 
     <span>Item C</span> 
    </label><br> 
    </div> 
</div> 

如果您運行Bootply，您會注意到崩潰在初始加載時無法正常工作。最初加載頁面時，可以看到摺疊項目（如預期的那樣）。然後點擊標題。它應該摺疊這些物品。相反，它很快隱藏了它們，然後擴展了列表。初次運行後，它工作正常。它只是當頁面加載時，我需要得到它，所以當你點擊它時列表會崩潰。我認爲設置aria-expanded="true"會照顧這一點，但事實並非如此。

Answer 1

您錯過了標識摺疊的組的classname，所以當您第一次單擊動作時，只需切換該類名即可。補充一點：

<div class="collapse in" id="items-list" style="padding-left:32px;">

UpdatedBootply