Twitter bootstrap 在引导中默认关闭手风琴

Twitter bootstrap 在引导中默认关闭手风琴,twitter-bootstrap,accordion,collapse,Twitter Bootstrap,Accordion,Collapse,我在用手风琴。我希望默认情况下关闭所有面板,但我的面板已开始展开 这是我的代码: ${提案.利息} 我还使用了aria expanded=“false”,但它不起作用 怎么了?这一行似乎是罪魁祸首: <div id="collapse${proposal.propID}" class="panel-collapse collapse in" ... 最近正在使用Bootstrap4,但实际上无法确定“in”类名在哪里(类似问题的多个答案中都提到了它) 经过大量搜索,注意到更新的文档,

我在用手风琴。我希望默认情况下关闭所有面板,但我的面板已开始展开

这是我的代码


${提案.利息}
我还使用了
aria expanded=“false”
,但它不起作用


怎么了?

这一行似乎是罪魁祸首:

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

最近正在使用Bootstrap4,但实际上无法确定“in”类名在哪里(类似问题的多个答案中都提到了它)

经过大量搜索,注意到更新的文档,其中显示:

collapse插件利用几个类来处理重载:

.折叠隐藏内容

.collapse.show显示内容

。折叠在转换开始时添加,在转换结束时删除

示例代码如下所示:

  <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>

可折叠组项目#1
动物保护协会的陈词滥调,埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。3狼月亮奥特餐厅,非丘比特滑板多洛早午餐。食品车奎奴亚藜。早午餐3狼月亮临时,圣塔阿利夸放了一只鸟在上面鱿鱼单一来源咖啡NullaAssumenda shoreditch等Nihil anim keffiyeh helvetica,工艺啤酒工人wes anderson cred Nesciut sapiente ea proident。纯素食主义者,屠夫副洛莫。紧身裤从工艺啤酒场到餐桌,生料牛仔布美学合成物,你可能还没听说过accusamus labore可持续VHS。
从中,这是重要的一点:

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

删除“show”类名可确保引导程序accordion在默认情况下保持折叠状态

<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>

希望这有帮助

您需要做的就是删除主体内容类中的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>

所有权限单击展开
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可
许可

阅读文档:.in类将使其在加载时打开。我冒昧地将您的代码转换为代码段,并添加了引导和jQuery依赖项。甚至比一个穿着靴子的人还要好(伊姆霍:)@ckuijjer干杯,谢谢你。我想我也可以使用JSFIDLE,但这是午餐时间lol。这个答案也适用于Bootstrap5(尽管HTML略有不同)。这应该是最好的答案。