Bootstrap Collapse 不会自动折叠答案

【问题标题】：Bootstrap Collapse not automatically collapsingBootstrap Collapse 不会自动折叠
【发布时间】：2016-11-18 17:50:39
【问题描述】：

我刚刚在 Laravel 的付款视图中插入了一个 Bootstrap 折叠。当我点击 Bootstrap 时它会折叠，但我希望它自动折叠。

我知道我必须设置这个：aria-expanded="false"

但它仍然无法正常工作。也许是因为它有这样的自己的id？

href="#collapse{{ $charity->id }}"

这是我的完整面板 sn-p：

@foreach($charities as $charity)

    <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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $charity->id }}" aria-expanded="false" aria-controls="collapseOne">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2 col-md-2">
                                <img class="media-object" src="{{ $charity->photo }}" width="75px" height="65px" alt="{{ $charity->name }}">
                            </div>
                            <div class="col-xs-9 col-sm-10 col-md-10">
                                {{ $charity->name }}
                            </div>
                        </div>
                    </a>
                </h4>
            </div>
            <div id="collapse{{ $charity->id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    {{ $charity->description }}
                </div>
            </div>
        </div>
    </div>

@endforeach

【问题讨论】：

尝试从id="collapse{{ $charity->id }}"删除折叠类

标签： javascript jquery twitter-bootstrap laravel

【解决方案1】：

如果您希望在页面加载时关闭第一个面板，请从中删除 .in 类。

从这里 --> <div id="collapse{{ $charity->id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

到这里 --> <div id="collapse{{ $charity->id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

collapse 插件利用几个类来处理繁重的起重：

.collapse 隐藏内容

.collapse.in 显示内容

.collapsing 在过渡开始时添加，在过渡结束时删除

请参阅文档中的 Collapse Usage。

示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          <div class="row">
            <div class="col-xs-3 col-sm-2 col-md-2">
              <img class="media-object" src="http://placehold.it/350x150" width="75px" height="65px" alt="alt">
            </div>
            <div class="col-xs-9 col-sm-10 col-md-10">
              NAME
            </div>
          </div>
        </a>
      </h4>
    </div>

    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        DESC
      </div>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：