为什么这个UI-Bootstrap手风琴不起作用？

Question

我正在尝试使用UI-Bootstrap制作手风琴页面。 我发现这个example这对我来说很好。所以我复制了我的项目中的代码，但它不起作用，显然...

我做了这个片段在快车debug。

在任何情况下，这是主要的代码：

<div class="container"> 
     <div class="row"> 
     <div class="col-md-8" id="main"> 
      <h3>Doesn't it look better ?</h3> 
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
      <div class="panel panel-default"> 
       <div class="panel-heading" role="tab" id="headingOne"> 
       <h4 class="panel-title"> 
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
        Why is it better 
       </a> 
       </h4> 
       </div> 
       <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
       <div class="panel-body"> 
        <ul> 
        <li>The titles are block, so you don't have to click the text part to activate it</li> 
        <li>Indicators for expand/collapsing items</li> 
        <li>Removed title links' obnoxious :hover underlinings, and outlines.</li> 
        </ul> 
       </div> 
       </div> 
      </div> 
      <div class="panel panel-default"> 
       <div class="panel-heading" role="tab" id="headingTwo"> 
       <h4 class="panel-title"> 
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
        Collapsible Group Item #2 
       </a> 
       </h4> 
       </div> 
       <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
       <div class="panel-body"> 
       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. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, 
       raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
       </div> 
       </div> 
      </div> 
      <div class="panel panel-default"> 
       <div class="panel-heading" role="tab" id="headingThree"> 
       <h4 class="panel-title"> 
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
        Collapsible Group Item #3 
       </a> 
       </h4> 
       </div> 
       <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
       <div class="panel-body"> 
       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. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, 
       raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 

你能告诉我，为什么它不工作？

谢谢

Answer 1

你缺少在plunker jquery.js和bootstrap.js。我加了以下几行，使其工作：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script> 

另外，注意你的手风琴组件不是ui-bootstrap手风琴。

见updated plunker

Answer 2

取代数据切换与NG单击和崩溃的div添加属性崩溃= “！collapseOne”

例如

<a role="button" ng-click="collapseOne = !collapseOne" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 

<div id="collapseTwo" collapse="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 

Answer 3

首先，你需要决定是否你想要去Angular路线或jQuery路线。在这种情况下不要使用两者。 Angular路线使用Angular UI Bootstrap库和仅Bootstrap CSS文件。 jQuery路线有你使用jQuery（显然），Bootstrap JS库和Bootstrap CSS。

不要混淆两者。如果你发现你是，你做错了。 Here是您的手风琴演示。