質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

jQueryが読み込まない原因がわかりません

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 210

gerick

score 15

現在模写コーディングを行う上でjQeryが動かずに困っています。
検証ツールのコンソールでエラーを確認したところ「Uncaught ReferenceError: jQuery is not defined at index.html:11」と出ていました。「Uncaught ReferenceError: jQuery is not defined」はよく出るエラーとのことで色々調べてはいるのですが、バージョンが古い訳でもないし、コード間違いは確認した限りでは無さそうだし、srcのURLが間違っている訳でもなく、、、。原因がわからず困っています。

下記にコードを貼っておりますので、どこか読み込めない原因があれば教えて欲しいです。
必要かわかりませんが以下を念のため記載しておきます。
エディタ:Atom
PC:Mac
開発環境:ローカル環境

コードはコピペなので、間違いなく読み込めてないだけだと思うので、どなたか教えてください、、、。
※質問の下部に模写サイトとコピペしたアコーディオンメニュのコードが記載されているサイトのURLを参考までに貼っておきます。
どうぞよろしくお願いたします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/stylesheet.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    jQuery(function ($) {
      $('.article-title').on('click', function () {
        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
        $(this).toggleClass('open');/*矢印の向きを変更*/
      });
    });
    </script>
<!--〜〜間のコードは省略してます〜〜-->
    <div class="qa_3">
      <div class="container">
        <h1><i class="far fa-envelope-open"></i>よくある質問</h1>
        <div id="accordion" class="accordion-container">
          <h4 class="article-title">プログラミングスキルは必要ですか?</h4>
          <div class="accordion-content">
            <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</p>
          </div><!--/.accordion-content-->
          <h4 class="article-title">参加費以上に稼げなかったらどうなりますか?</h4>
          <div class="accordion-content">
            <p>参加費である248,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。(講座参加後、週30時間以上の実践をすることと、週1回の実践報告をすることが延長条件です。)きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</p>
          </div><!--/.accordion-content-->
          <h4 class="article-title">滞在中の宿泊先はどうなりますか?</h4>
          <div class="accordion-content">
            <p>宿泊費用が必要ですが、iSara提携のホステルに宿泊することになりますので心配はありません。</p>
          </div><!--/.accordion-content-->
          <h4 class="article-title">滞在中の食事はどうなりますか?</h4>
          <div class="accordion-content">
            <p>拠点となる新築シェアハウスの周辺に、50バーツ程度の(160円)安価な飲食店が多数あります。 日本食レストランもありますし、出前を取ることも可能です。</p>
          </div><!--/.accordion-content-->
        </div><!--/#accordion-->
      </div>
    </div>
    <footer>
      <div class="container">
      <p>バンコクのノマドエンジニア育成講座、iSara[イサラ]<br>Copyright ©︎ iSara All Rights Reserved.</p>
      <p>Designed by Maya Ogi / Developed by Kentaro Koga</p>
      </div>
    </footer>
  </body>
</html>
@charset "utf-8";
*{

}
body{
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  margin:0 auto;
}
li{
  list-style: none;
}
/* container */
.container{
  width:1200px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  height:auto;
}

/*--〜〜間のCSSは省略してます〜〜--*/

/* qa_3 */
.qa_3{
  display:inline-block;
  width:100%;
  height:1600px;
}
.accordion-container {
  position: relative;
  width: 100%;
  border: 1px solid #0079c1;
  border-top: none;
  outline: 0;
  cursor: pointer
}

.accordion-container .article-title {
  display: block;
  position: relative;
  margin: 0;
  padding: 0.625em 0.625em 0.625em 2em;
  font-size: 1.25em;
  font-weight: normal;
  color: #fff;
  background: #000;
  cursor: pointer;
}

.accordion-container .article-title:hover,
.accordion-container .article-title:active,
.accordion-container .content-entry.open .article-title {
  background-color: #00aaa7;
  color: white;
}

.accordion-container .article-title:hover i:before,
.accordion-container .article-title:hover i:active,
.accordion-container .content-entry.open i {
  color: white;
}

.article-title{
  position: relative;
}

.article-title:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.article-title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}

.accordion-content {
  display: none;
  padding-left: 2.3125em;
}

/* CSS for CodePen */
.accordion-container {
  width: 300px;
  margin: 1.875em auto;
}

/* footer */
footer{
  display:inline-block;
  width:100%;
  height:200px;
  background-color:#ECECEC;
}
<!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    jQuery(function ($) {
      $('.article-title').on('click', function () {
        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
        $(this).toggleClass('open');/*矢印の向きを変更*/
      });
    });
    </script>

模写サイトURL
https://isara.life/
コピペしたアコーディオンメニューの元サイトURL
https://flex-box.net/accordion/

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

<!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    jQuery(function ($) {
      $('.article-title').on('click', function () {
        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
        $(this).toggleClass('open');/*矢印の向きを変更*/
      });
    });
    </script>


<!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>
    jQuery(function ($) {
      $('.article-title').on('click', function () {
        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
        $(this).toggleClass('open');/*矢印の向きを変更*/
      });
    });
    </script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/18 19:53

    本当にありがとうございます。
    完全に抜けてましたね・・・・。笑
    大変助かりました!!うまく作動できました!!
    数秒早くお応えをいただいたのでベストアンサーとさせていただきます!

    キャンセル

+1

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    jQuery(function ($) {
      $('.article-title').on('click', function () {
        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
        $(this).toggleClass('open');/*矢印の向きを変更*/
      });
    });
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
    jQuery(function ($) {
      $('.article-title').on('click', function () {
        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
        $(this).toggleClass('open');/*矢印の向きを変更*/
      });
    });
    </script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/18 19:21

    これほどまでに回答まる被りするとは。

    キャンセル

  • 2019/10/18 19:53

    こちらも本当にありがとうございます。
    全く同じご指摘で自分自身のミスを痛感しました!!笑

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる