在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>类，并启动OPEN。第二个面板切换它们，并启动CLOSED。

修改

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

Answer 2

最近使用Bootstrap 4进行​​操作，实际上无法弄清楚“ in”类名称的位置（在类似问题的多个答案中都有提及）。

经过大量搜索，发现更新后的文档显示：

  

崩溃插件利用一些类来处理繁重的工作：

     

.collapse隐藏内容

     

.collapse.show显示内容

     

.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手风琴在默认情况下保持折叠状态。

希望这会有所帮助！

Answer 3

您需要做的就是删除正文内容类中的show，它会默认关闭。

<div class="accordion" id="accordionExample">
                  <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                      <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        <span class="fw-bold">All Permissions</span><span class="text-notch ms-2">Click to expand</span>
                      </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                      <div class="accordion-body">
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                        <button type="button" class="btn btn-outline-primary mb-3 ms-3">Permission</button>
                      </div>
                    </div>
                  </div>
                </div>