🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

682閲覧

アコーディオン機能を実装させたい。

dai-su

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/02/19 13:28

編集2021/02/19 14:24

isara模写でのアコーディオン機能を実装させたいのですが上手くいきません。(何も反応しません)
他の方の質問等を参考にしコードを書きましたが、どこが間違っているか分かりません。
どなたか分かる方よろしくお願いします!

HTML

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet" href="style.css"> 9 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> 11 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 12 </head> 13 <body> 14  <div class="situmon"> 15 <div class="conteiner"> 16 <div class="situmon-content"> 17 <h1><span class="fas fa-envelope-open"></span>よくある質問</h1> 18 </div> 19 <div class="situmon-list"> 20 <ul class="ul-list"> 21 22 <li class="list-item"> 23 <h3 class="h-question"><a href="#"><span class="fas fa-question-circle"></span>プログラミングスキルは必要ですか?<span class="fas fa-angle-down angle"></span></a></h3> 24 <div class="list-answer"> 25 <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを<br> 26 実施し、場合によってはお断りをしております。この点だけはご了承ください。</p> 27 </div> 28 </li> 29 30 </ul> 31 </div> 32 33 34 </div> 35 </div> 36 37 <script src="javascript.js"></script> 38</body> 39</html>

CSS

1.situmon{ 2 height: 1220px; 3 4 .situmon-list{ 5 display: inline-block; 6 .list-item{ 7 position: relative; 8 cursor: pointer; 9 list-style: none; 10 h3{ 11 width: 1170px; 12 height: 64px; 13 font-size: 20px; 14 font-weight: bold; 15 letter-spacing: 1px; 16 text-align: left; 17 border: 1px solid gray; 18 border-radius: 5px; 19 margin: 0 auto; 20 padding: 20px; 21 22 a{ 23 color: black; 24 } 25 26 .fa-question-circle{ 27 color: black; 28 } 29 30 .fa-angle-down{ 31 float: right; 32 line-height: 32px; 33 } 34 35 .angle{ 36 position: absolute; 37 top:15px; 38 right:15px; 39 } 40 } 41 42 p{ 43 /*display: none;*/ 44 font-size: 16px; 45 font-weight: bold; 46 letter-spacing: 1px; 47 line-height: 1.6; 48 text-align: left; 49 display: none; 50 } 51 } 52 } 53}

javascript

1$(function(){ 2 3 4$('.h-question').click(function(){ 5 $(this).next().next('.list-answer').slideToggle(); 6 7 $(this).toggleClass("open"); 8 }); 9});

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

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

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

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

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

guest

回答1

0

ブラウザの開発者ツール機能を使うと、JSコードをデバッグできますよ。

今回の場合、クリックイベントに仕込んだハンドラは、ちゃんと呼ばれてます。でも、$(this).next().next('.list-answer')だと、狙い通りのdivをセレクトできません。$(this).next('.list-answer')ならうまくいくと思います。

イメージ説明

投稿2021/02/21 04:13

gpsoft

総合スコア1323

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問