爲什麼這個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是您的手風琴演示。