Bootstrap Collapse 不会自动折叠

Posted 2023-03-14

【中文标题】Bootstrap Collapse 不会自动折叠

【英文标题】：Bootstrap Collapse not automatically collapsing

【发布时间】：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 "   >
                            </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 "删除折叠类

【参考方案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"   >
            </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>