부트 스트랩이 두 개의 속성 "data-parent"로 작동하지 않는 이유는 무엇입니까?

Question

<div id="foo-one"> 
    <h4 data-toggle="collapse" data-parent="#foo-one" data-target=".bar"> 
    Collapsible 
    </h4> 
    <div class="bar collapse" role="tabpanel"> 
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
    </div> 
</div> 
<div id="foo-two"> 
    <h4 data-toggle="collapse" data-parent="#foo-two" data-target=".bar"> 
    Collapsible 
    </h4> 
    <div class="bar collapse" role="tabpanel"> 
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
    </div> 
</div> 

블록은 동 기적으로 열립니다

데모 : http://codepen.io/miloslovesky/pen/RNwYXw 당신은 간단하게 접을 수있는 요소에 대해 두 개의 서로 다른 ID를 정의 할 필요가

Answer 1

. 내 개정판을 살펴보십시오.

http://codepen.io/anon/pen/jEOebG

<div id="foo"> 
    <h4><a data-toggle="collapse" data-parent="#foo" href="#bar-one"> 
Collapsible 
    </a></h4> 
    <div id="bar-one" class="bar collapse" role="tabpanel"> 
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
    </div> 
    <h4><a data-toggle="collapse" data-parent="#foo" href="#bar-two"> 
Collapsible 
    </a></h4> 
    <div id="bar-two" class="bar collapse" role="tabpanel"> 
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
    </div> 
</div>