在Bootstrap默认关闭手风琴

Question

我正在使用Bootstrap Accordion。我希望所有面板默认关闭，但我的面板开始扩展。

这是我的代码：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
    <c:forEach items="${proposals}" var="proposal" varStatus="serial">
        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="heading${proposal.propID}"  >
                <h4 class="panel-title">
                    <span class="fa fa-paperclip" aria-hidden="true"></span>
                    <a class="accordion-toggle collapsed" 
                       data-toggle="collapse" data-parent="#accordion"
                       href="#collapse${proposal.propID}" aria-expanded="false"
                       aria-controls="collapse${proposal.propID}"> 
                           ${proposal.title} 
                    </a>
                </h4>
            </div>

            <div id="collapse${proposal.propID}" class="panel-collapse collapse in"
                 role="tabpanel" aria-labelledby="heading${proposal.propID}">
                ${proposal.interest}
            </div>

        </div>
    </c:forEach> 
</div>

我也使用aria-expanded="false"，但它不起作用。

怎么了？

Answer 1

这条线似乎是罪魁祸首：

<div id="collapse${proposal.propID}" class="panel-collapse collapse in" ...

如果你在课堂上摆脱in，它应该按照你的结构工作。看看这个例子，看看两个面板之间的区别：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          This Panel is Open By Default
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Open
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          This Panel Is Closed By Default
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Closed
      </div>
    </div>
  </div>
</div>

请注意，第一个面板上没有class=collapsed的<a>标签，并且在in标签上有<div>类，并开始打开。第二个面板切换它们，并启动CLOSED。

编辑

无法制作Bootply，不断收到“应用程序错误”。

Answer 2

最近使用Bootstrap 4并且实际上无法确定“in”类名称的位置（在类似问题的多个答案中提到它）。

经过大量搜索，注意到更新的文档说：

崩溃插件使用几个类来处理繁重的工作：

.collapse隐藏内容

.collapse.show显示内容

。转换开始时添加.collapsing，完成转换后删除.collapsing

所以示例代码现在看起来像这样：

  <div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

从中，这是重要的一点：

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">

删除“show”类名称可确保默认情况下Bootstrap手风琴保持折叠状态。

希望这可以帮助！