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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

311閲覧

jsファイル(jQuery)を読みこんでくれません。

Shinya

総合スコア3

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/10/06 06:01

編集2022/10/07 04:19

ここに質問の内容を詳しく書いてください。
このサイトの模写をしたんですが、うまくjsファイルを読み込んでくれません。もちろんちゃんとjQueryの公式サイトに書いてあったコードをコピペしました。
何が原因なのか分からないので質問しました。
10/07
追記したのでよろしくお願いします。

実現したいこと

クリックして動くようにしたい

発生している問題・エラーメッセージ

デモサイトのようにならない

該当のソースコード

(index.html) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="テキストテキストテキストテキスト"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="style.css"> <title>タイトル</title> </head> <body> <div class="content"> <h2 class="title">募集職種</h2> <ul class="ac-menu"> <li> <div class="label">1.Webディレクター</div> <div class="detail"> <dl> <dt>仕事内容</dt> <dd>テキストテキストテキストテキスト</dd> <dt>応募資格</dt> <dd>テキストテキストテキストテキスト</dd> <dt>必須スキル</dt> <dd>テキストテキストテキストテキスト</dd> <dt>給与</dt> <dd>xxx万~xxx万(スキル・経験・実績により優遇)</dd> <dt>休日・休暇</dt> <dd>土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇</dd> <dt>雇用形態</dt> <dd>正社員(試用期間3ヶ月)<br>業務委託</dd> <dt>勤務先</dt> <dd>フレックスタイム</dd> <dt>勤務地</dt> <dd>東京</dd> </dl> </div> </li> <li> <div class="label">2.Webデザイナー</div> <div class="detail"> <dl> <dt>仕事内容</dt> <dd>テキストテキストテキストテキスト</dd> <dt>応募資格</dt> <dd>テキストテキストテキストテキスト</dd> <dt>必須スキル</dt> <dd>テキストテキストテキストテキスト</dd> <dt>給与</dt> <dd>xxx万~xxx万(スキル・経験・実績により優遇)</dd> <dt>休日・休暇</dt> <dd>土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇</dd> <dt>雇用形態</dt> <dd>正社員(試用期間3ヶ月)<br>業務委託</dd> <dt>勤務先</dt> <dd>フレックスタイム</dd> <dt>勤務地</dt> <dd>東京</dd> </dl> </div> </li> <li> <div class="label">3.プログラマー</div> <div class="detail"> <dl> <dt>仕事内容</dt> <dd>テキストテキストテキストテキスト</dd> <dt>応募資格</dt> <dd>テキストテキストテキストテキスト</dd> <dt>必須スキル</dt> <dd>テキストテキストテキストテキスト</dd> <dt>給与</dt> <dd>xxx万~xxx万(スキル・経験・実績により優遇)</dd> <dt>休日・休暇</dt> <dd>土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇</dd> <dt>雇用形態</dt> <dd>正社員(試用期間3ヶ月)<br>業務委託</dd> <dt>勤務先</dt> <dd>フレックスタイム</dd> <dt>勤務地</dt> <dd>東京</dd> </dl> </div> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="main.js"></script> </body> </html> (cssファイル) @charset "ut-f8"; html { font-size: 100%; } body { background-color: #fffdef; color: #000; } ul { list-style: none; } .content { max-width: 960px; padding: 0 20px; margin: 100px auto; } .title { font-size: 2rem; font-weight: normal; margin-bottom: 50px; } #ac-menu li { border-top: solid 1px #000; } #ac-menu li:last-child { border-bottom: solid 1px #000; } #ac-menu .label { cursor: pointer; font-size: 1.125rem; font-weight: bold; padding: 40px 30px; position: relative; transform: .5s; } #ac-menu .label:hover { background-color: #ffda5f; } #ac-menu .label::before, #ac-menu .label::after { content: ''; width: 20px; height: 1px; background: #000; position: absolute; top: 50%; right: 5%; transform: translateY(-50%); } #ac-menu .label::after { transform: translateY(-50%) rotate(90deg); transition: .5s; } #ac-menu .label.open { border-color: #ffda5f; } #ac-menu .label.open { opacity: 0; } #ac-menu .label.open::before { transform: rotate(180deg); } #ac-menu .detail { border-top: solid 1px #ccc; padding: 35px 30px; display: none; } #ac-menu .detail dl { display: flex; flex-wrap: wrap; } #ac-menu .detail dt { width: 20%; font-weight: bold; margin-bottom: 40px; } #ac-menu .detail dd { width: 80%; margin-bottom: 40px; } /*------------------------------------------- SP -------------------------------------------*/ @media screen and (max-width: 600px) { #ac-menu .label { padding: 40px 0; } #ac-menu .detail { padding: 35px 0; } #ac-menu .detail dl { flex-direction: column; } #ac-menu .detail dt { width: 100%; margin-bottom: 10px; } #ac-menu .detail dd { width: 100%; padding-left: 10px; } } (main.jsファイル) $(function(){ $("#ac-menu .label").on("click", function() { $(this).next().slideToggle(); $(this).toggleClass("open"); }); });

試したこと

scriptのコードをhead内に書き換えもしましたが、変わりませんでした。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cocode

2022/10/06 09:20

「読み込んでくれない」を詳しく説明くださると助かりますー! ①エラーがでているのか? ②エラーは出ていないけど、意図通りの動き(アコーディオンやクラスのツケ外し)をしてくれないのか? ①の場合、エラーの文章をすべてコピペして、質問に追記してください。 ②の場合、中略されているbodyの内容を追加してください。 よろしくお願いいたします。
guest

回答1

0

ベストアンサー

何をもって「読み込んでいない」と判断されたのでしょう。
提示コードではbodyに要素がなく、CSSも提示されてないので再現できませんが、
main.jsを最小限にしたところコンソールにエラーも出てないのでjQueryが読み込まれていないわけではないと思います。

JavaScript

1$(function(){ 2 console.log($('body')) 3});

読み込んでいなければ$に対し未定義のエラーが出ます。
単にHTMLが正しく組めていないか、JavaScriptで要素が正しく指定されていないかのどちらかでは?
(もしくはmain.jsが正しくリンクできてないとか)

投稿2022/10/06 06:09

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問