web-dev-qa-db-ja.com

Bootstrap）でデフォルトでアコーディオンを閉じます

Bootstrapアコーディオンを使用しています。デフォルトですべてのパネルを閉じたいのですが、パネルが展開され始めています。

これが私のコードです：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
    <c:forEach items="${proposals}" var="proposal" varStatus="serial">
        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="heading${proposal.propID}"  >
                <h4 class="panel-title">
                    <span class="fa fa-Paperclip" aria-hidden="true"></span>
                    <a class="accordion-toggle collapsed" 
                       data-toggle="collapse" data-parent="#accordion"
                       href="#collapse${proposal.propID}" aria-expanded="false"
                       aria-controls="collapse${proposal.propID}"> 
                           ${proposal.title} 
                    </a>
                </h4>
            </div>

            <div id="collapse${proposal.propID}" class="panel-collapse collapse in"
                 role="tabpanel" aria-labelledby="heading${proposal.propID}">
                ${proposal.interest}
            </div>

        </div>
    </c:forEach> 
</div>

aria-expanded="false"も使用しましたが、機能しません。

何が悪いの？

twitter-bootstrapaccordioncollapse
9
Iqbal hossain

ここのこの行が原因のようです：

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

クラスでinを削除すると、構造化されたとおりに機能するはずです。この例を見て、2つのパネルの違いを確認してください。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          This Panel is Open By Default
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Open
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          This Panel Is Closed By Default
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Closed
      </div>
    </div>
  </div>
</div>

最初のパネルのclass=collapsedタグには<a>がなく、<div>タグにinクラスがあり、OPENを開始していることに注意してください。 2番目のパネルはそれらを切り替え、CLOSEDを開始します。

[〜＃〜]編集[〜＃〜]

Bootplyを作成できません。「アプリケーションエラー」が発生し続けます。

20
Tim Lewis

最近Bootstrap 4で作業していて、「in」クラス名がどこにあるかを実際に把握できませんでした（同様の質問の複数の回答で言及されています）。

多くの検索の後、次のような更新されたドキュメントに気づきました：

折りたたみプラグインは、いくつかのクラスを利用して、手間のかかる作業を処理します。

.collapseはコンテンツを非表示にします

.collapse.showはコンテンツを表示します

.collapsingは、遷移の開始時に追加され、終了時に削除されます

したがって、サンプルコードは次のようになります。

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

そこから、これは重要なビットです：

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

「show」クラス名を削除すると、Bootstrapアコーディオンがデフォルトで折りたたまれたままになります。

お役に立てれば！

2
Venkatesh Thapan