引導：崩潰組內崩潰組

Question

我用從jsfiddle 68RXPcollapse-group例子來創建可擴展的div：

HTML：

<div class="span4 collapse-group"> 
    <h2>Heading</h2> 
    <p class="collapse">Lorem ipsum</p> 
    <p><a class="btn" href="#">View details &raquo;</a></p> 
</div> 

的Javascript：

$('.row .btn').on('click', function(e) { 
    e.preventDefault(); 
    var $this = $(this); 
    var $collapse = $this.closest('.collapse-group').find('.collapse'); 
    $collapse.collapse('toggle'); 
}); 

當按下btn時，p類在展開和摺疊模式之間切換。

我試圖用同樣的概念遞歸可摺疊的div：

<div class="collapse-group"> 
    <p><a class="btn" href="#">Open outer div &raquo;</a></p> 
    <div class="collapse"> 
     <h2>Outer div title</h2> 
     <p>Outer div text</p> 
     <div class="collapse-group"> 
      <p><a class="btn" href="#">Open inner div &raquo;</a></p> 
      <div class="collapse"> 
       <h2>Inner div title</h2> 
       <p>Inner div text</p> 
      </div> 
     </div> 
    </div> 
</div> 

相同的js代碼之前，請jsFiddle WdbUe。

第一次打開外部摺疊式div時，內部div也會打開。 如何將每個expand按鈕連接到單個可摺疊div上？

Answer 1

我用data-toggle="collapse" data-target="#some_id"併爲每可摺疊div獨特的ID：

<div class="container"> 
    <div class="hero-unit"> 
     <h2>Bootstrap-jQuery collapse example</h2> 
     <p>Based on <a href="http://jsfiddle.net/Sherbrow/68RXP/">fiddle 68RXP</a></p> 
     <div class="collapse-group"> 
      <p><a class="btn" data-toggle="collapse" data-target="#demoout">Open outer div &raquo;</a></p> 
      <div class="collapse in" id="demoout"> 
       <h1>Outer div title</h1> 
       <p>Outer div text</p> 

       <div class="collapse-group"> 
        <p><a class="btn" data-toggle="collapse" data-target="#demoin">Open inner div &raquo;</a></p> 
        <div class="collapse in" id="demoin"> 
         <h2>Inner div title</h2> 
         <p>Inner div text</p> 

        <div class="collapse-group"> 
        <p><a class="btn" data-toggle="collapse" data-target="#demoinin">Open inner div &raquo;</a></p> 
        <div class="collapse in" id="demoinin"> 
         <h3>Inner-inner div title</h3> 
         <p>Inner-inner div text</p> 
        </div> 
        </div>  
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

有了這個js代碼：

$(document).ready(function(){ 
      $(".collapse").collapse(); 
}); 

工作例如：jsfiddle K63P3

貸：aximay@jsbin。