尝试在手风琴下拉菜单中更改 +/- 图标，但 Javascript 文件似乎不会在我的 HTML 中本地加载。 (Bootstrap 4)

Question

这里绝对是 100% 的 JS 初学者，所以请多多包涵。在过去的几天里，我一直在网上搜索，但没有找到任何有用的信息。我正在使用 Bootstrap 4 并试图构建一个带有 +/- 图标的手风琴，该图标随扩展和收缩而变化。我基本上只是想重新创建这个例子：http://www.bootply.com/89084#

我的基本 JSFiddle 大部分都有效，尽管它不会在打开另一个手风琴时折叠手风琴（如果你能帮助我的话，加分）。 https://jsfiddle.net/fufwwy7j/2/

然而，当我在本地加载 HTML 文件时，出现 'Uncaught ReferenceError: $ is not defined' 错误。我认为这是导致问题的原因？ HTML 和 JS 文件都位于同一个文件夹中，因此我的 <head> 部分中的脚本标记只是读取 <script src="plusminus.js"></script>.

$('.collapse').on('show.bs.collapse', function() {
  $(this).parent().find(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function() {
  $(this).parent().find(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/ef3ff7fda3.js"></script>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <span class="fa fa-plus float-xs-right"></span>
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Text
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <span class="fa fa-plus float-xs-right"></span>
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Text
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <span class="float-xs-right fa fa-plus"></span>
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Text
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

Answer 1

您需要一个引用 jquery 的脚本标签：Uncaught ReferenceError: $ is not defined?

Answer 2

你提到的例子是使用bootstrap3。尝试将 bootstrap3 附加到您的外部资源，或者像这样

将它们添加到 html 的顶部

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

工作 jsfiddle https://jsfiddle.net/highestblue/hcq3wk1f/

如果要使用bootstrap4，参考http://v4-alpha.getbootstrap.com/components/collapse/

尝试在手风琴下拉菜单中更改 +/- 图标，但 Javascript 文件似乎不会在我的 HTML 中本地加载。 (Bootstrap 4)

Attempting a +/- icon change on accordion dropdown, but the Javascript file won't seem to load locally in my HTML. (Bootstrap 4)

javascript

twitter-bootstrap

bootstrap-4