为什么下面的代码没有切换面板？

Question

即使在包含所有脚本后，下面给出的代码也无法正常工作files.I无法在面板上看到切换。代码中需要添加什么？

<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="row aet-content-fluid">
          <div class="panel-group ud-accordion" id="accordion" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingOne">
                      <div class="panel-title">
                          <h2>
                              <a role="button" data-parent="#accordion"
                                        data-toggle="collapse" href="javascript:void(0);#tab1" aria-controls="tab1"
                                        class="" aria-expanded="false"><span>Office Information</span>
                                </a>
                            </h2>
                        </div>
                    </div>
                        <div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                          <div class="panel-body office-detail-panelBody">
                  This content is straight in the template.
              </div>
            </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

我花了一些时间，但问题似乎出在您包含的脚本中。首先，您需要包含一个 jquery。第二个：顺序很重要。

当我将 <head> 部分设置为：

<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="example.js"></script>
  </head>

成功了！前三个内容（link 和两个脚本）是 bootstrap 创作者推荐的顺序。

为什么下面的代码没有切换面板？

Why the below code is not toggling the panel?

angular-ui-bootstrap