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

Question

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

为了更快 debug。

我在 plunker 中制作了这个片段

无论如何这是主要代码：

    <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

将 data-toggle 替换为 ng-click 并在 collapse 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

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

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

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

Why this UI-Bootstrap accordion doesn't work?

accordion

twitter-bootstrap

angularjs

angular-ui-bootstrap