21

jqueryのシンプルなプラグインであるbootstrapが提供する折りたたみプラグインを使用しています

ただし、デフォルトでは折りたたまれていますが、デフォルトで折りたたみアイテムが非表示になるように変更するには、ヘッダーを押したときにのみ、アイテムが折りたたまれて表示されますか? ありがとうございました

プラグインのドキュメント、わずか数行なので 1 分しかかかりません

$(document).ready( function () {
$(".collapse").collapse()({
  toggle: false,
  show: false
  });
} );

これはhtmlです：

<div class="accordion-group">
            <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">                     
              Collapsible #1
                  </div>   
          <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
               content1
           </div>
                           <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">                     
              Collapsible #2
                  </div>   
          <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
               content2
           </div>

4

2 に答える 2

59

Bootstrap 3 では、いくつかの点が変更されました。次のコードは、Bootstrap 3 で必要な機能を実現します

パネル本体をデフォルトで表示する場合:

<div id="collapseOne" class="panel-collapse collapse in">

パネル本体をデフォルトで非表示にする場合:

<div id="collapseOne" class="panel-collapse collapse">

次に例を示します。

<div class="bs-example">
    <div class="panel-group" id="accordion">

          <!- Repeat For Next Panel------->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                       xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx
                    </a>
                </h4>
           </div>
               <div id="collapseOne" class="panel-collapse collapse in">
                   <div class="panel-body">
                       xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx
                   </div>
               </div> 
         </div>
            <!- Repeat For Next Panel---(but change <div id="collapseTwo")--->

     </div>
 </div>
于 2013-10-08T18:38:04.730 に答える