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

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

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

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

3回答

928閲覧

アコーディオンメニューがうまく動作しません。

gerick

総合スコア20

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/10/16 07:57

現在模写コーディングを行なっている中でアコーディオンメニューの箇所があります。
検証ツールやググってみたりと色々試してみましたがなぜかうまく行きません。
あまりJqueryの学習をしていなかったせいが理解が追いついていないだけなのかもしれませんが、どなたか動作できるようご教示いただきたいです。

JS

1<!-- jQuery --> 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 3 $(function ($) { 4 $('.question_title_link').on('click', function () { 5 $(this).next().slideToggle(200); 6 $(this).toggleClass('open'); 7 }); 8 }); 9</script>

HTML5

1<div class="qa_3"> 2 <div class="container"> 3 <h1><i class="far fa-envelope-open"></i>よくある質問</h1> 4 <div class="qa_3_menu"> 5 <ul class="menu"> 6 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか?</a></li> 7 <ul class="answer"> 8 <li class="answer_text">いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</li> 9 </ul> 10 </ul> 11 <ul class="menu"> 12 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>参加費以上に稼げなかったらどうなりますか?</a></li> 13 <ul class="answer"> 14 <li class="answer_text">参加費である248,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。(講座参加後、週30時間以上の実践をすることと、週1回の実践報告をすることが延長条件です。)きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</li> 15 </ul> 16 </ul> 17 <ul class="menu"> 18 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>滞在中の宿泊先はどうなりますか?</a></li> 19 <ul class="answer"> 20 <li class="answer_text">宿泊費用が必要ですが、iSara提携のホステルに宿泊することになりますので心配はありません。</li> 21 </ul> 22 </ul> 23 <ul class="menu"> 24 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>滞在中の食事はどうなりますか?</a></li> 25 <ul class="answer"> 26 <li class="answer_text">拠点となる新築シェアハウスの周辺に、50バーツ程度の(160円)安価な飲食店が多数あります。 日本食レストランもありますし、出前を取ることも可能です。</li> 27 </ul> 28 </ul> 29 <ul class="menu"> 30 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>追加でかかる費用はありますか?</a></li> 31 <ul class="answer"> 32 <li class="answer_text">宿泊費(トータル20000円)と食費(一食150円程度)くらいです。</li> 33 </ul> 34 </ul> 35 <ul class="menu"> 36 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>就職、転職はできますか?</a></li> 37 <ul class="answer"> 38 <li class="answer_text">DODAの調査によると、2017年のエンジニアの求人倍率は7.5倍です。これは、人材不足が叫ばれる医療業界(医師:6倍、看護師:3倍)よりも高い数値です。ですのできちんとしたスキルを身につけることができれば、就職・転職には困らないはずです。元リクルートの転職のプロも運営スタッフとして参加しています。</li> 39 </ul> 40 </ul> 41 <ul class="menu"> 42 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>フリーランスにならなければならないのですか?</a></li> 43 <ul class="answer"> 44 <li class="answer_text">いいえ、必ずフリーランスにならないといけないわけではありません。 実際に過去の卒業生の方の進路も、独立、副業として続ける、就職するなど様々です。</li> 45 </ul> 46 </ul> 47 <ul class="menu"> 48 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>ノマドワーカー的に世界を旅しながら働きたいです。可能ですか?</a></li> 49 <ul class="answer"> 50 <li class="answer_text">きちんと努力し、スキルを身に着けることができれば可能です。 iSaraは、「好きなときに働き、好きなときに遊ぶ」という人生を送れる人を増やすために開講しました。 ちなみに、講師は全員ノマドワーカーとして、働きながら自由に世界中を旅しています。</li> 51 </ul> 52 </ul> 53 <ul class="menu"> 54 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>学ぶプログラミング言語はなんですか?</a></li> 55 <ul class="answer"> 56 <li class="answer_text">HTML / CSS / PHPを学びます。どの言語も需要が高いです。</li> 57 </ul> 58 </ul> 59 <ul class="menu"> 60 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>将来的にwebサービス、アプリ、メディアを作りたいです。</a></li> 61 <ul class="answer"> 62 <li class="answer_text">経験してる講師がいますよ。大丈夫です。</li> 63 </ul> 64 </ul> 65 <ul class="menu"> 66 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>次回開催の予定はありますか?</a></li> 67 <ul class="answer"> 68 <li class="answer_text">未定です。まずはお問合せください。</li> 69 </ul> 70 </ul> 71 <ul class="menu"> 72 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>海外に出るのが初めてで不安です。</a></li> 73 <ul class="answer"> 74 <li class="answer_text">講師陣が現地での生活をサポートしますので安心してください。ただしパスポート取得は必要です。</li> 75 </ul> 76 </ul> 77 <ul class="menu"> 78 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>タイ語、英語が一切話せません。参加可能でしょうか。</a></li> 79 <ul class="answer"> 80 <li class="answer_text">タイ語スタッフ、英語スタッフがいるのでOKです。日本人、タイ人スタッフがおりますので、期間中のトラブル対応の心配は必要ありません。</li> 81 </ul> 82 </ul> 83 <ul class="menu"> 84 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>治安はどうですか?</a></li> 85 <ul class="answer"> 86 <li class="answer_text">バンコクは、東南アジアや南アジアの他の国の都市部と比べると、街中も整備されており、非常に治安の良い街です。日本ほどではないですが、世界でも非常に治安の良い国として知られています。</li> 87 </ul> 88 </ul> 89 <ul class="menu"> 90 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>パソコンは必要ですか?</a></li> 91 <ul class="answer"> 92 <li class="answer_text">はい。ノートPCのご用意が必要です。</li> 93 </ul> 94 </ul> 95 </div> 96 </div> 97 </div>

CSS3

1.qa_3{ 2 display:inline-block; 3 width:100%; 4 height:1600px; 5} 6.menu{ 7 padding-left:0; 8} 9.question_title{ 10 display:block; 11 width:100%; 12 font-size:20px; 13 border: 1px solid #E5E5E5; 14 text-align:left; 15 cursor:pointer; 16 padding:15px; 17 box-sizing: border-box; 18} 19.question_title a{ 20 text-decoration:none; 21 color:black; 22 font-weight:bold; 23} 24.fa-question-circle{ 25 color:#006EA9; 26 text-decoration:none; 27} 28.question_title_link{ 29 display:block; 30 padding: 0 10px; 31 position: relative; 32} 33.question_title_link::after{ 34 display: flex; 35 align-items: center; 36 content:'\f078'; 37 font-family: "Font Awesome 5 Free"; 38 color:#E5E5E5; 39 position: absolute; 40 right:0; 41 top:0; 42 bottom:0; 43} 44.question_title_link.on::after { 45 content: '\f077'; 46} 47.answer{ 48 display:none; 49 padding-left: 0px; 50} 51.answer_text{ 52 display:block; 53 width:100%; 54 color:#333333; 55 font-size:16px; 56 font-weight:bold; 57 text-align:left; 58 cursor:pointer; 59 padding:20px; 60 box-sizing: border-box; 61}

描き模写サイトの一番下にあるアコーディオンと同じようにしたいと思っています。
https://isara.life/

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

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

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

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

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

guest

回答3

0

ベストアンサー

私も基本的にはk.tasa様と同じですが
個人的にはhrefに#を入れてlink自体の動作を抑制をし

Html

1<a class="question_title_link" href="#">

シンプルにslideToggleを使うのであればtoggleClassも不要

JavaScript

1$(function ($) { 2 $('.question_title_link').on('click', function (e) { 3 $(this).parent().next().slideToggle(200); 4 }); 5 }); 6

という形を考えてました。

投稿2019/10/16 08:35

miyasaka

総合スコア271

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

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

gerick

2019/10/16 09:03

ありがとうございます! 上記のものだとおそらく右側の矢印の変化がないメニューになってしまうと思うので、できればそれ込みでの組み込み方法をご教示いただきたいです!
guest

0

スライドさせたいのは$('.answer')だと思うので、$('.question_title_link').next()では正常に動作しないですね。親要素の隣接要素に対してslideToggleするようにしてみてはどうでしょうか?
(それとlink自体の動作を抑制するためにpreventDefaultはしておいたほうがいいかと)

js

1 $(function ($) { 2 $('.question_title_link').on('click', function (e) { 3 e.preventDefault() 4 $(this).parent().next().slideToggle(200); 5 $(this).toggleClass('open'); 6 }); 7 });

投稿2019/10/16 08:11

k.tada

総合スコア1679

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

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

gerick

2019/10/16 09:01

ありがとうございます!なんとなく理解はできたのですが、やはりコピペで貼ってもページトップに行ってしまい、Jqueryが動作しません。aのhrefは#にもしてみましたが、うまく行きませんでした、、、。原因不明です。
guest

0

最終形がわからないのでなんともいえませんが

  • HTMLの構造がちょっとおかしい
  • aをクリックしときのイベントをキャンセル

javascript

1<style> 2.open{color:red !important;} 3.qa_3{ 4 display:inline-block; 5 width:100%; 6 height:1600px; 7} 8.menu{ 9 padding-left:0; 10} 11.question_title{ 12 display:block; 13 width:100%; 14 font-size:20px; 15 border: 1px solid #E5E5E5; 16 text-align:left; 17 cursor:pointer; 18 padding:15px; 19 box-sizing: border-box; 20} 21.question_title a{ 22 text-decoration:none; 23 color:black; 24 font-weight:bold; 25} 26.fa-question-circle{ 27 color:#006EA9; 28 text-decoration:none; 29} 30.question_title_link{ 31 display:block; 32 padding: 0 10px; 33 position: relative; 34} 35.question_title_link::after{ 36 display: flex; 37 align-items: center; 38 content:'\f078'; 39 font-family: "Font Awesome 5 Free"; 40 color:#E5E5E5; 41 position: absolute; 42 right:0; 43 top:0; 44 bottom:0; 45} 46.question_title_link.on::after { 47 content: '\f077'; 48} 49.answer{ 50 display:none; 51 padding-left: 0px; 52} 53.answer_text{ 54 display:block; 55 width:100%; 56 color:#333333; 57 font-size:16px; 58 font-weight:bold; 59 text-align:left; 60 cursor:pointer; 61 padding:20px; 62 box-sizing: border-box; 63} 64</style> 65<script> 66$(function ($) { 67 $('.question_title_link').on('click', function (e) { 68 e.preventDefault(); 69 $(this).next().slideToggle(200); 70 $(this).toggleClass('open'); 71 }); 72}); 73</script> 74<div class="qa_3"> 75 <div class="container"> 76 <h1><i class="far fa-envelope-open"></i>よくある質問</h1> 77 <div class="qa_3_menu"> 78 <ul class="menu"> 79 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか?</a> 80 <ul class="answer"> 81 <li class="answer_text">いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</li> 82 </ul> 83 </li> 84 </ul> 85 <ul class="menu"> 86 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>参加費以上に稼げなかったらどうなりますか?</a> 87 <ul class="answer"> 88 <li class="answer_text">参加費である248,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。(講座参加後、週30時間以上の実践をすることと、週1回の実践報告をすることが延長条件です。)きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</li> 89 </ul> 90 </ul> 91 <ul class="menu"> 92 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>滞在中の宿泊先はどうなりますか?</a> 93 <ul class="answer"> 94 <li class="answer_text">宿泊費用が必要ですが、iSara提携のホステルに宿泊することになりますので心配はありません。</li> 95 </ul> 96 </li> 97 </ul> 98 <ul class="menu"> 99 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>滞在中の食事はどうなりますか?</a> 100 <ul class="answer"> 101 <li class="answer_text">拠点となる新築シェアハウスの周辺に、50バーツ程度の(160円)安価な飲食店が多数あります。 日本食レストランもありますし、出前を取ることも可能です。</li> 102 </ul> 103 </li> 104 </ul> 105 <ul class="menu"> 106 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>追加でかかる費用はありますか?</a> 107 <ul class="answer"> 108 <li class="answer_text">宿泊費(トータル20000円)と食費(一食150円程度)くらいです。</li> 109 </ul> 110 </li> 111 </ul> 112 <ul class="menu"> 113 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>就職、転職はできますか?</a> 114 <ul class="answer"> 115 <li class="answer_text">DODAの調査によると、2017年のエンジニアの求人倍率は7.5倍です。これは、人材不足が叫ばれる医療業界(医師:6倍、看護師:3倍)よりも高い数値です。ですのできちんとしたスキルを身につけることができれば、就職・転職には困らないはずです。元リクルートの転職のプロも運営スタッフとして参加しています。</li> 116 </ul> 117 </li> 118 </ul> 119 <ul class="menu"> 120 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>フリーランスにならなければならないのですか?</a> 121 <ul class="answer"> 122 <li class="answer_text">いいえ、必ずフリーランスにならないといけないわけではありません。 実際に過去の卒業生の方の進路も、独立、副業として続ける、就職するなど様々です。</li> 123 </ul> 124 </li> 125 </ul> 126 <ul class="menu"> 127 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>ノマドワーカー的に世界を旅しながら働きたいです。可能ですか?</a> 128 <ul class="answer"> 129 <li class="answer_text">きちんと努力し、スキルを身に着けることができれば可能です。 iSaraは、「好きなときに働き、好きなときに遊ぶ」という人生を送れる人を増やすために開講しました。 ちなみに、講師は全員ノマドワーカーとして、働きながら自由に世界中を旅しています。</li> 130 </ul> 131 </li> 132 </ul> 133 <ul class="menu"> 134 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>学ぶプログラミング言語はなんですか?</a> 135 <ul class="answer"> 136 <li class="answer_text">HTML / CSS / PHPを学びます。どの言語も需要が高いです。</li> 137 </ul> 138 </li> 139 </ul> 140 <ul class="menu"> 141 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>将来的にwebサービス、アプリ、メディアを作りたいです。</a> 142 <ul class="answer"> 143 <li class="answer_text">経験してる講師がいますよ。大丈夫です。</li> 144 </ul> 145 </li> 146 </ul> 147 <ul class="menu"> 148 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>次回開催の予定はありますか?</a> 149 <ul class="answer"> 150 <li class="answer_text">未定です。まずはお問合せください。</li> 151 </ul> 152 </li> 153 </ul> 154 <ul class="menu"> 155 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>海外に出るのが初めてで不安です。</a> 156 <ul class="answer"> 157 <li class="answer_text">講師陣が現地での生活をサポートしますので安心してください。ただしパスポート取得は必要です。</li> 158 </ul> 159 </li> 160 </ul> 161 <ul class="menu"> 162 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>タイ語、英語が一切話せません。参加可能でしょうか。</a> 163 <ul class="answer"> 164 <li class="answer_text">タイ語スタッフ、英語スタッフがいるのでOKです。日本人、タイ人スタッフがおりますので、期間中のトラブル対応の心配は必要ありません。</li> 165 </ul> 166 </li> 167 </ul> 168 <ul class="menu"> 169 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>治安はどうですか?</a> 170 <ul class="answer"> 171 <li class="answer_text">バンコクは、東南アジアや南アジアの他の国の都市部と比べると、街中も整備されており、非常に治安の良い街です。日本ほどではないですが、世界でも非常に治安の良い国として知られています。</li> 172 </ul> 173 </li> 174 </ul> 175 <ul class="menu"> 176 <li class="question_title"><a class="question_title_link" href=""><i class="far fa-question-circle"></i>パソコンは必要ですか?</a> 177 <ul class="answer"> 178 <li class="answer_text">はい。ノートPCのご用意が必要です。</li> 179 </ul> 180 </li> 181 </ul> 182 </div> 183 </div> 184 </div>

投稿2019/10/16 08:09

yambejp

総合スコア114574

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問