ブートストラップ崩壊データ - 親が動作しない

Question

私はブートストラップ2.2.1を使用していますが、何らかの理由でデータの親属性が意図したとおりに動作していません。別のターゲットをクリックすると、以前に開いたターゲットを閉じることはありません。以下のコードのfiddleがあります。これを修正する方法はありますか？

<div id="accordion"> 
    <ul> 
     <li> 
      <a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a> 
      <ul id="document" class="collapse"> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">option 2</a> 
     </li> 
     <li> 
      <a href="#">option 3</a> 
     </li> 
     <li> 
      <a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a> 
      <ul id="document2" class="collapse"> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

私は、これはどちらか動作させることができなかった - これはあなたがリストではなく、divを使用しているという事実に関連したブートストラップJSで何かかもしれ？

私はクリックイベントを無効にする必要がありました。ここでは、この質問に基づいて：Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap

私は、各オプションリンクにaccordion-toggleクラスを追加し、それを動作させるために、以下のJavaScriptを追加しました：

$(document).on('click', '.accordion-toggle', function(event) { 
     event.stopPropagation(); 
     var $this = $(this); 

     var parent = $this.data('parent'); 
     var actives = parent && $(parent).find('.collapse.in'); 

     // From bootstrap itself 
     if (actives && actives.length) { 
      hasData = actives.data('collapse'); 
      //if (hasData && hasData.transitioning) return; 
      actives.collapse('hide'); 
     } 

     var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7 

     $(target).collapse('toggle'); 
});​ 

このfiddleはアクションでそれを示しています。

Answer 2

もブートストラップの崩壊で苦労しています。私は何かに少し違うことをしようとしていました。インライントグル動作が欲しかった。以下の私のJSフィドルを見てください。私が見つけたのは、ブートストラップには、ドキュメントで扱っているdata-parent属性に加えて、 "accordion-group" divの存在が必要なようだということです。そのため、JSにバグがあるか、ドキュメントにはバグが含まれています。また、私はそれは言うあなたの項目にアコーディオングループクラスを使用する必要があります...アコーディオングループのdivにスタイルをゼロにするために

http://jsfiddle.net/cssguru/SRFFJ/

<div id="accordion2"> 
    <div class="accordion-group" style="border:0;padding:0;margin:0"> 
     <div id="collapseOne" class="collapse in"> 
      Foo Bar... 
      <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       Show Herp Derp 
      </a> 
     </div> 
     <div id="collapseTwo" class="collapse"> 
      Herp Derp... 
      <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       Show Foo Bar 
      </a> 
     </div> 
    </div> 
</div> 

Answer 3

を持っていた、問題にhttps://github.com/twitter/bootstrap/issues/4988

Answer 4

を見ますブートストラップ文書内：セレクタが提供されている場合は

、次いで 指定された親の下にあるすべての折り畳み可能な要素が閉鎖されたときに、この折り畳み式項目が表示されます。 （伝統的なアコーディオンの動作に似て - これは panelクラスに依存している）

ので、パネル・グループで使用する必要がありますが、あなたはとにかくJavaScriptを無効にすることができます。

http://getbootstrap.com/javascript/#collapse-options