jQuery読み込めない

質問

アコーディオンメニューを導入しようと思い、こちらのサイトの
https://b-risk.jp/blog/2021/11/accordion/#1
1つ開くと他の項目が閉じるアコーディオンのコードをコピペしましたが、表示はされますが動きません。
コードはコピペしただけなので、まったく変更していません。
たぶん、jQueryを読み込んでいないのだと思います。
Chromeのデベロッパーツールを開きConsoleタブが開いたら

Failed to load resource: the server responded with a status of 404 (Not Found)

Failed to load resource: the server responded with a status of 400 (Bad Request)

というメッセージが出ます。

jQuery自体は</head>の上に
<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
と記載し動作は確認済みです。
アコーディオンメニューのjQueryコードは</body>の上に記載しています。
コードは次のとおりです。
■HTML
<div class="qa">
<div class="q">Q1.○○？</div>
<div class="a">A1.✕✕！</div>
</div>
<div class="qa">
<div class="q">Q2.○○？</div>
<div class="a">A2.✕✕！</div>
</div>
<div class="qa">
<div class="q">Q3.○○？</div>
<div class="a">A3.✕✕！</div>
</div>
<div class="qa">
<div class="q">Q4.○○？</div>
<div class="a">A4.✕✕！</div>
</div>
<div class="qa">
<div class="q">Q5.○○？</div>
<div class="a">A5.✕✕！</div>
</div>

■CSS
.qa {
font-size: 20px;
.q {
background-color: mediumseagreen;
height: 60px;
padding: 15px 40px 15px 15px;
position: relative;
cursor: pointer;

&:before {
position: absolute;
content: "";
display: block;
width: 10px;
height: 2px;
background-color: #fff;
right: 15px;
top: 50%;
transform: translate(0, -50%);
}

&:after {
position: absolute;
content: "";
display: block;
width: 10px;
height: 2px;
background-color: #fff;
right: 15px;
top: 50%;
transform: translate(0, -50%) rotate(90deg);
}
}

.q.active {
&:after {
display: none;
}
}

.a {
background-color: greenyellow;
height: 60px;
display: none;
padding: 15px;
}
}

■jQuery
$('.q').click(function(){
$(this).siblings('.a').stop().slideToggle();
$('.q').not($(this)).siblings('.a').slideUp();
$(this).toggleClass('active');
$('.q').not($(this)).removeClass('active');
});

以上、よろしくお願いいたします。

回答No.4

AsarKingChang · ベストアンサー

試した見たら、1発で動きましたよ。
------------------------------
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>

<script type='text/javascript'>
console.log("JAVASCIRPTが起動しました");
$(function(){
console.log("JQUERYが起動しました");
$('.q').click(function(){
console.log("JQ::Listenerが起動しました");
$(this).siblings('.a').stop().slideToggle();
$('.q').not($(this)).siblings('.a').slideUp();
$(this).toggleClass('active');
$('.q').not($(this)).removeClass('active');
});
});
</script>

<style>
.qa {
font-size: 20px;
.q {
background-color: mediumseagreen;
height: 60px;
padding: 15px 40px 15px 15px;
position: relative;
cursor: pointer;

&:before {
position: absolute;
content: "";
display: block;
width: 10px;
height: 2px;
background-color: #fff;
right: 15px;
top: 50%;
transform: translate(0, -50%);
}

&:after {
position: absolute;
content: "";
display: block;
width: 10px;
height: 2px;
background-color: #fff;
right: 15px;
top: 50%;
transform: translate(0, -50%) rotate(90deg);
}
}

.q.active {
&:after {
display: none;
}
}

.a {
background-color: greenyellow;
height: 60px;
display: none;
padding: 15px;
}
}
</style>

<div class="qa">
<div class="q">Q1.○○？</div>
<div class="a">A1.??！</div>
</div>
<div class="qa">
<div class="q">Q2.○○？</div>
<div class="a">A2.??！</div>
</div>
<div class="qa">
<div class="q">Q3.○○？</div>
<div class="a">A3.??！</div>
</div>
<div class="qa">
<div class="q">Q4.○○？</div>
<div class="a">A4.??！</div>
</div>
<div class="qa">
<div class="q">Q5.○○？</div>
<div class="a">A5.??！</div>
</div>
------------------------------
本当にこのまま、保存して動作しています。
HTMLやら、HEADやら、BODYすらもないですが＾＾

で、思うに原因が、ここ！

<script type='text/javascript'>
console.log("JAVASCIRPTが起動しました");
$(function(){
console.log("JQUERYが起動しました");
$('.q').click(function(){
console.log("JQ::Listenerが起動しました");
$(this).siblings('.a').stop().slideToggle();
$('.q').not($(this)).siblings('.a').slideUp();
$(this).toggleClass('active');
$('.q').not($(this)).removeClass('active');
});
});
</script>

JavaScript空間で、Jquery命令を発行していたりしませんか？
ソースに、空間が切り替わった時、console.logを入れておきましたので、
デバッガーにて、「あ～なるほにゃ～」を体験してみるのは
ありだと思います。

おまけ、結局は実際に実行してるのはCSSなので、
エレメント出しながら、Jqueryがどこを書き換えたのかな～？
って観察すると、ドノーマルのJavaScriptでも同じことが出来るので、
Jqueryなしで実行できてエコですよ。
（余計な読み込みはサイトを遅くするだけなので、
　検索エンジンのサイトスコア下がるのでね。）

ってことで、解決？？？かにゃ？
（なぜか、今日は、イライラMAXで「にゃ～にゃ～」モード）
（貴方にじゃないので、気にせず～）

お礼

AsarKingChangさん、いつもありがとうございます。

console.logを入れると動くようになりました。
それにしても何にでもお詳しいですね。
ありがとうございました。
今後ともよろしくお願いいたします。

回答No.3

AsarKingChang

たまに、OKWAVE画像送信ミスするので、別投稿にします。

回答No.2

AsarKingChang

>をコピーし入れ替えましたが、やはり動きません。

現在のエラーなどを見せてもらえますか？

最初の投稿時の問題は恐らくこれで解決しているので、
さらに別の問題が発生していると思われるためなので。

回答No.1

AsarKingChang

原因はこれです。

>コードはコピペしただけなので、まったく変更していません。

コピペした「だけ」だからです。

構成物をコピーしてないのですよ。

で、直接の原因はここ！
<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>

これは、この人のサイトのJqueryです。

対処法はCDNを使いましょう。
今回3.7.1を使いたいと書いているので、
https://releases.jquery.com/
公式のJqueryから、
jQuery 3.x
の「minified」つまり、".min.js"の事

を押すと、
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>

これをコピーしろ！ってウインドウが開くのでそれをコピー

貴方のソースの
<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>

これと入れ替えてください。

なお！
404ってのは、「貴方のサーバーにファイルがないよ！」エラーです。

それだけで、1発で動きますよ！

補足

AsarKingChangさん、いつも大変お世話になっております。

おっしゃる通りhttps://releases.jquery.com/から
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
をコピーし入れ替えましたが、やはり動きません。
よろしくお願いいたします。