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

Question

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

我在 plunker 中制作了这个 sn-p 以获得更快的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

首先，您需要决定是走 Angular 路线还是 jQuery 路线。在这种情况下不要同时使用两者。 Angular 路线让您使用 Angular UI Bootstrap 库和仅 Bootstrap CSS 文件。 jQuery 路由让您使用 jQuery（显然）、Bootstrap JS 库和 Bootstrap CSS。

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

Answer 2

将 data-toggle 替换为 ng-click 并在折叠 div 中添加属性 collapse="!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

您在 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