Bootstrap 折叠组件的初始使用不起作用

Question

我有一个使用 Bootstrap 的应用程序。我需要使用 Bootstrap Collapse component. I have created a Bootply to demonstrate my problem 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，您会注意到折叠在初始加载时无法正常工作。当页面最初加载时，折叠项目是可见的（如预期的那样）。然后单击header。它应该折叠物品。相反，它会快速隐藏它们，然后展开列表。在最初的运行之后，它工作正常。只是当页面加载时，我需要获取它，以便在您单击它时列表折叠。我以为设置 aria-expanded="true" 会解决这个问题，但事实并非如此。

Answer 1

您缺少识别折叠的组的 classname，因此当您第一次单击时，操作只会切换该类名。添加：

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

UpdatedBootply

Bootstrap 折叠组件的初始使用不起作用

Initial use of Bootstrap Collapse component is not working

javascript

css

twitter-bootstrap