2013-04-22 8 views
49

私はbootstrapテンプレートを使用しており、デフォルトでaccordionの動作を変更したいと思います。最初に折りたたまれたブートストラップ

ロード時にページが最初に表示されたときに、トグルを閉じるようにするにはどうすればよいですか?あなたがアコーディオンを展開または折りたたむときあなたは

+1

最初にアコーディオンを崩壊させてもらえませんか? – PSL

+2

はい、私はそれがページの読み込みで閉じられるようにします。 – JoshuaJeanThree

+6

"in"を削除するだけです。答えを見てください... – PSL

答えて

77

「の崩壊」から「中」で削除する必要があり

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

それだけで/「で」クラスを削除追加し、アコーディオンのdivにheight:autoまたは0を設定します。

Demo

あなたはそれを定義するときだからあなたのアコーディオンにだけ、次のようにdiv要素からクラス「の」削除。 accorionを展開するたびに、「in」クラスが追加されて可視になります。

"in"ブートストラップでページをレンダリングすると、クラスが検索され、divの高さがautoになります。存在しない場合は、高さがゼロになります。

<div id="collapseOne" class="accordion-body collapse"> 
11

別の解決策が崩壊ターゲットに偽のトグルを=追加することで、これはランダムに開いて、あなただけの

例えば

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

これは私を大いに助けました。私はdivを最初に表示し、トグルを使って非表示にする必要がありました。ただし、data-toggle = "false"を指定しないと、最初にdivがぼやけていました(既に見えているので馬鹿に見えました)。次に2番目のトグルから開始して、期待どおりに動作します。 –

+1

また、私の問題を解決しました。私のdiv(ボタンを含む)は、最初は崩壊していて、それを編集した上で、最初の2回は何かを表示して隠すことになりました... –

+1

ありがとう!これは私の問題を解決しました。私は最初に「入」したことはありませんでしたが、最初はまだ拡大されていました。 data-toggle = "false"を追加すると、それが解決されました。 –

-2

「に」を削除した場合に起こる決算停止しますinクラスを削除しても問題が解決しない場合は、CSSの表示プロパティを使用して折りたたまれた初期状態を強制できます。

... 
<div id="collapseOne" class="accordion-body collapse" style="display: none;"> 
... 
+1

ブートストラップが誤解されているのを見て奇妙なことがあります... –

+0

@VishalKumarSahuコードが実装されているコンテキストを制御できないことがあります。また、クライアントがコードを再コード化またはデバッグするための支払いをしないこともあります。あなたは適応しなければなりません。 –

関連する問題