7

Bootstrapの折りたたみコンポーネントを使用しようとしています。

それはうまく機能しますが、他のすべての要素を閉じないことがあることに気づきました。最初から3番目に順番にクリックしてから、もう一度最初に戻ると、3番目のものは開いたままになります。

今のところテストしているだけなので、私のマークアップはBootstrapが提供するサンプルコードと同じです。

 <div class="accordion" id="accordion2"> 
        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
              Collapsible Group Item #1
            </a> 
          </div> 
          <div id="collapseOne" class="accordion-body collapse in"> 
            <div class="accordion-inner"> 
             Part 1
            </div> 
          </div> 
        </div> 

        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
              Collapsible Group Item #2
            </a> 
          </div> 
          <div id="collapseTwo" class="accordion-body collapse"> 
            <div class="accordion-inner"> 
             Part 2
            </div> 
          </div> 
        </div> 

        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
              Collapsible Group Item #3
            </a> 
          </div> 
          <div id="collapseThree" class="accordion-body collapse"> 
            <div class="accordion-inner"> 
              Part 3
            </div> 
          </div> 
   </div>

JavaScriptコードは次のとおりです。

$(".collapse").collapse("#accordion2");

このコンポーネントをメニューで使用することを考えていることを考えると、PHP変数値に従って開いているグループを表示するには、クラスをdiv collapseOne/などに出力するcollapseTwo必要がありますか？

4

2 に答える 2

4

実際、javascriptの部分は必要ありません-削除してください!! 奇妙な振る舞いを引き起こすのはまさにそのコードaccordion2です-2回初期化され、「ロジック」の二重セットになります。あなたの問題は、javascriptを使用するかどうかによって完全に再現可能です。

一般に、Twitterブートストラップに関しては、data attributesここで行ったように、すべてのデータとバインディング機能をに配置できる場合、JavaScriptを実行する必要はありません。TBは、ページの読み込み時に、それらを探すことによって自動的にジョブを実行しますdata attributes。

単にアドレスを指定するだけではやりたいことができない場合は、JavaScriptを2番目のオプションとして考えてくださいdata attributes。

于 2012-10-29T12:11:30.993 に答える