javascript - Bootstrap Collapse 不会自动折叠

Question

我刚刚将 Bootstrap 折叠插入到 Laravel 的付款 View 中。当我点击 Bootstrap 时它会折叠，但我希望它自动折叠。

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

但它仍然不起作用。也许是因为它有自己的ID？

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

这是我的完整面板片段:

@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

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

The collapse plugin utilizes a few classes to handle the heavy lifting:

1. .collapse hides the content
2. .collapse.in shows the content
3. .collapsing is added when the transition starts, and removed when it finishes

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