引导：崩溃组内崩溃组

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。