Question

类似的问题被问到here，这是一个类似于我的问题。我怀疑锚点在Angular的路由方面存在问题，但现在崩溃是没有反应的。单击时不会打开或展开。是否需要执行一些额外的实现，以使其在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>

Answer 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。

Answer 2

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

为此感谢大量车轮旋转。感谢您的帮助。

与AngularJS的Bootstrap折叠手风琴

2 个答案: