Question

以下给定的代码即使包含所有脚本文件也无法正常工作。我无法在面板上看到切换。需要添加什么代码？

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

有效！三个第一个包含（链接和两个脚本）是bootstrap创建者推荐的顺序。

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

1 个答案: