1
絶対100％JS初心者はこちらですので、どうぞ私と一緒にください。私は過去数日間Webを精査して何か役に立つものを見つけられませんでした。私はブートストラップ4を使用しており、+/-アイコンを使ってアコーディオンを構築しようとしています。私は基本的にこの例を再作成しようとしています：http://www.bootply.com/89084#アコーディオンのドロップダウンで+/-アイコンを変更しようとしましたが、JavascriptファイルがHTMLにローカルに読み込まれていないようです。 （ブートストラップ4）
私の基本的な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>
良い領主を参照してください。取った？正しい方向に私を指摘してくれてありがとう。 – user3089095