ここに質問の内容を詳しく書いてください。
このサイトの模写をしたんですが、うまく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内に書き換えもしましたが、変わりませんでした。
回答1件
あなたの回答
tips
プレビュー