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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

解決済

jqueryのアコーディオンが動きません

S.saeki
S.saeki

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

1回答

0評価

0クリップ

113閲覧

投稿2022/06/25 08:23

jqueryのアコーディオン

三つのアコーディオンを作成しました。
一番上のアコーディオンは動作するのですが、
その下の二つのアコーディオンが動作しません。

何がおかしいのか見当がつかない状況です。

わかる方がいましたら、教えていただけますでしょうか。

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"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.min.js" defer></script> <script src="js/script.js" defer></script> <title>jQueryアコーディオン</title> </head> <body> <div class="wrapper"> <h2 class="ttl"> 募集職種 </h2><!-- /.ttl --> <ul class="accoList"> <li class="accoList-1"> <div class="accoList-ttl" id="slide-btn"> <h3>1.Webディレクター</h3> </div><!-- /.accoList-ttl --> <div class="accoList-list" id="slide-view"> <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><!-- /.accoList-list --> </li><!-- /.accoList-1 --> <li class="accoList-2"> <div class="accoList-ttl" id="slide-btn"> <h3>2.Webデザイナー</h3> </div><!-- /.accoList-ttl --> <div class="accoList-list" id="slide-view"> <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><!-- /.accoList-list --> </li><!-- /.accoList-2 --> <li class="accoList-3"> <div class="accoList-ttl" id="slide-btn"> <h3>3.プログラマー </h3> </div><!-- /.accoList-ttl --> <div class="accoList-list" id="slide-view"> <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><!-- /.accoList-list --> </li><!-- /.accoList-3 --> </ul><!-- /.accoList --> </div><!-- /.wrapper --> </body> </html>

css

*, ::after, ::before { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: #fffbef; } li { list-style: none; } ul { padding: 0; } .wrapper { max-width: 960px; padding: 0 20px; margin: 100px auto; } .accoList-ttl { padding: 30px 20px; border-top: 1px solid #000; border-bottom: 1px solid #666; transition: .5s; } .accoList-ttl:hover { background-color: #ffda5f; } .accoList-list { display: none; } .accoList dl { display: flex; flex-wrap: wrap; padding: 20px; } .accoList dl dt { width: 20%; margin-bottom: 20px; } .accoList dl dd { width: 75%; margin-bottom: 20px; }

jQuery

'use strict'; $(function() { $(this).on('click', function() { // console.log("yes"); // 押されたボタンの次の要素の $(this).next().slideToggle(); }) })

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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