Q&A
ありがとうございます！なんとなく理解はできたのですが、やはりコピペで貼ってもページトップに行ってしまい、Jqueryが動作しません。aのhrefは#にもしてみましたが、うまく行きませんでした、、、。原因不明です。
現在模写コーディングを行なっている中でアコーディオンメニューの箇所があります。
検証ツールやググってみたりと色々試してみましたがなぜかうまく行きません。
あまり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時間以上の実践をすることと、週１回の実践報告をすることが延長条件です。）きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</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/
回答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
総合スコア271
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
総合スコア1679
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時間以上の実践をすることと、週１回の実践報告をすることが延長条件です。）きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</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
総合スコア116694
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/16 09:03