使用 AngularJS 引导折叠手风琴答案

【问题标题】：Bootstrap collapse accordions with AngularJS使用 AngularJS 引导折叠手风琴
【发布时间】：2016-04-25 08:12:00
【问题描述】：

here 提出了一个类似的问题，这个问题与我的问题类似。我怀疑锚点与 Angular 的路由有问题，但现在崩溃的没有响应。单击时不会打开或展开。除了添加 data-target 标记之外，是否需要做一些额外的实现才能使其在 AngularJS 中工作？

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

【问题讨论】：

提供一个最小的代码示例来演示您的问题。这个问题太模糊了。
完成。锚点和href 的问题似乎已经确认here。无论如何，数据目标应该可以作为替代品，但在我看来似乎并非如此。这是一个示例pen。

标签： angularjs twitter-bootstrap

【解决方案1】：

如果您查看here，它们会显示使用data-parent 标记的示例。

像这样：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit</div>
    </div>
  </div>
</div>

第二个例子来自w3schools。

【讨论】：

糟糕。还没有看到你的评论，@AndrewSquared
谢谢，它似乎在 codepen 中有效，但在我的环境中无效。我似乎无法弄清楚为什么。我认为它与 jquery 库有关。当我在引导库之后加载它时，数据目标不起作用，但如果我之前加载它，它确实有效。这种行为与 Angular 无关。
@AndrewSquared - 听起来你应该在引导之前包含 jQuery...根据引导文档 - “插件依赖项一些插件和 CSS 组件依赖于其他插件。如果单独包含插件，请确保在文档中检查这些依赖项。还请注意，所有插件都依赖于 jQuery（这意味着 jQuery 必须在插件文件之前包含）。请参阅我们的 bower.json 以查看支持哪些版本的 jQuery。"
这是正确的。我曾假设使用 bootstrap 设置 bower 依赖项引入了编译版本（包括 jQuery），但它有一个嵌套的 bower 依赖项并将 jQuery 作为一个单独的库引入 - 需要单独包含。

【解决方案2】：

所以，事实证明问题与我拥有的 bootstrap 的 bower 包有关。 bootstrap 的 bower install 不提供 bootstrap.js 的编译版本，而是将 jquery 作为单独的库下载，并且都需要包含（首先包含依赖库）。

很多轮子为此旋转，感谢您的帮助。

【讨论】：