在AngularJS页面中使用Bootstrap手风琴效果

Question

在AngularJS页面中使用Bootstrap手风琴效果

javascripthtmlangularjstwitter-bootstrap

3

当我尝试在AngularJS页面中运行以下代码时，遇到了问题。

      <div class='panel-group' id=accordion'>
        <div class="panel panel-default">
          <h4 class="panel-title">
            <a data-toggle='collapse' data-parent='#accordion' href='#collapseOne'>foo</a>
          </h4>
          <div id='collapseOne' class='panel-collapse collapse'>
            <div class='panel-body'>
              <p>foo</p>
            </div>
          </div>
        </div>
      </div>

代码是正确的，但由于Angular使用#作为例行程序的锚点，当我点击切换手风琴时，它会将我重定向到主页。有没有办法防止这种情况发生？

注：我知道有一个名为ui-bootstrap的库可用于处理angularjs手风琴，我只想知道是否有一种方法可以在不使用该库的情况下解决我的问题 :).

- Scipion

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Starscream1984 · Accepted Answer

如果你想要一个快速但有点破解的方式而不是编写自己的指令或使用BootstrapUI，你可以绕过Bootstrap jQuery切换手风琴的方法，而是将angular指令放入标记中：

<div class='panel-group' id=accordion'>
    <div class="panel panel-default">
        <h4 class="panel-title">
            <a data-ng-click="accordion1 = !accordion1">foo</a>
        </h4>
        <div data-ng-show="accordion1">
            <div class='panel-body'>
                <p>foo</p>
            </div>
        </div>
    </div>
</div>

如果从body包装器中删除了collapse类，可能需要进行一些轻微的css调整，除了显示/隐藏之外还会有其他影响。