68

我正在使用引导模板，我想更改手风琴的默认工作方式。

第一次看到页面时（加载时）如何关闭切换？

<div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>
4

9 回答 9

94

当您展开或折叠手风琴时，它只是添加/删除“in”类并将height:autoor0设置为手风琴 div。

Demo

因此，在您的手风琴中，当您定义它时，只需从 div 中删除“in”类，如下所示。每当您展开手风琴时，它只会添加“in”类以使其可见。

如果您使用“in”引导程序呈现页面，则会查找该类，它将使 div 的高度：auto，如果它不存在，它将处于零高度。

<div id="collapseOne" class="accordion-body collapse">
于 2013-04-22T22:45:28.490 回答
41

您需要从“collapse in”中删除“in”

于 2013-04-22T22:15:47.727 回答
12

另一种解决方案是将toggle = false添加到折叠目标，这将阻止它随机打开和关闭，如果您只是删除“in”就会发生这种情况

例如

<div class="accordion-heading">
    <a class="accordion-toggle"
        data-toggle="collapse"
        data-parent="#accordion2"
        href="#collapseOne">Open!</a>
</div>
<div
    id="collapseOne"
    class="accordion-body collapse"
    data-toggle="false"
    >
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>
于 2014-06-20T14:41:35.007 回答
5

只需将类“show”添加到折叠元素的类中，bootstrap 将使用 js 动态删除它以折叠并显示

于 2019-05-25T13:26:07.887 回答
1

需要从类中删除节目：

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

它必须是

<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
于 2019-09-10T08:07:28.433 回答
0

我只是在“card-body”之前将类隐藏添加到 div 中，默认情况下它是隐藏的。

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

于 2018-11-12T11:22:06.227 回答
0

手风琴中有一个类，它只是将高度从 height:auto 或 0 调整到手风琴 div。

如果您删除“in”类并且单击它时，引导程序会再次添加“in”类，现在内容将可见

<div id="collapseOne" class="accordion-body collapse">
....
</div>
于 2019-12-31T10:39:26.357 回答
0

对于 bootstrap v4+，您需要删除“show”类，而不是删除“in”类

<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>
于 2021-06-17T13:43:54.910 回答
-2

如果删除in类对您不起作用，例如我的情况，您可以使用 CSS 显示属性强制折叠初始状态：

...
<div id="collapseOne" class="accordion-body collapse" style="display: none;">
...
于 2016-08-24T04:51:05.443 回答