Question

当我尝试在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使用＃作为例程的锚点，当我点击切换我的手风琴时，它会将我重定向到我的主页。有什么方法可以阻止这个吗？

ps：我知道有一个用于angularjs的库ui-bootstrap，带有一个处理手风琴的指令，我只是想知道是否有办法解决我的问题而没有它：）。

Answer 1

如果你想要一个没有编写自己的指令或使用BootstrapUI的快速轻微hacky方式，你可以绕过引导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>

如果从正文包装中移除的collapse类除了显示/隐藏

之外还有其它任何操作，那么可能需要一些轻微的CSS

在angularjs页面上使用bootstrap手风琴

1 个答案: