Q&A
$(this).next().slideToggle(); この$(this).next() は何を指しているか見てみました？
jQuely：slide toggle使用時、繰り返し開閉を直したい
isaraの模写を現在行っています。
アコーディオンの実装は初めてなのですが、
・アンサー部分の開閉
・矢印アイコンの切替
は出来たのですが、開閉の無限ループに陥ってしまいます。
発生している問題・エラーメッセージ
２、３度クリックするとバグを起こしてしまったのか、何度も開閉を繰り返してしまって、もう一度クリックしても止まる事は無くなってしまいます。
※ディベロッパーツールでは特にエラーメッセージなど有りませんでした。
該当のソースコード
HTML
1<div class="question"> 2 <div class="question-wrapper"> 3 <div class="question-logo"> 4 <h2><i class="far fa-envelope-open"></i>よくある質問</h2> 5 </div> 6 <div class="question-lessons"> 7 <div class="Qlesson"> 8 <div class="question-lesson"> 9 <p><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか？<span><i class="fas fa-angle-down"></i></span></p> 10 </div> 11 <div class="questionAco"> 12 <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</p> 13 </div> 14 </div> 15 16 <div class="Qlesson"> 17 <div class="question-lesson"> 18 <p><i class="far fa-question-circle"></i>参加費以上に稼げなかったらどうなりますか？<span><i class="fas fa-angle-down"></i></span></p> 19 </div> 20 21 <p class="questionAco">参加費である248,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。（講座参加後、週30時間以上の実践をすることと、週１回の実践報告をすることが延長条件です。）きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</p> 22 23 </div> 24 25 <div class="Qlesson"> 26 <div class="question-lesson"> 27 <p><i class="far fa-question-circle"></i>滞在中の宿泊先はどうなりますか？<span><i class="fas fa-angle-down"></i></span></p> 28 </div> 29 30 <p class="questionAco">宿泊費用が必要ですが、iSara提携のホステルに宿泊することになりますので心配はありません。</p> 31 32 </div> 33 34 <div class="Qlesson"> 35 <div class="question-lesson"> 36 <p><i class="far fa-question-circle"></i>滞在中の食事はどうなりますか？<span><i class="fas fa-angle-down"></i></span></p> 37 </div> 38 39 <p class="questionAco">拠点となる新築シェアハウスの周辺に、50バーツ程度の（160円）安価な飲食店が多数あります。 日本食レストランもありますし、出前を取ることも可能です。</p> 40 41 </div> 42 43 <div class="Qlesson"> 44 <div class="question-lesson"> 45 <p><i class="far fa-question-circle"></i>追加でかかる費用はありますか？<span><i class="fas fa-angle-down"></i></span></p> 46 </div> 47 48 <p class="questionAco">宿泊費（トータル20000円）と食費（一食150円程度）くらいです。</p> 49 50 </div> 51 52 <div class="Qlesson"> 53 <div class="question-lesson"> 54 <p><i class="far fa-question-circle"></i>就職・転職はできますか？<span><i class="fas fa-angle-down"></i></span></p> 55 </div> 56 57 <p class="questionAco">DODAの調査によると、2017年のエンジニアの求人倍率は7.5倍です。これは、人材不足が叫ばれる医療業界（医師：6倍、看護師：3倍）よりも高い数値です。ですのできちんとしたスキルを身につけることができれば、就職・転職には困らないはずです。元リクルートの転職のプロも運営スタッフとして参加しています。</p> 58 59 </div> 60 61 <div class="Qlesson"> 62 <div class="question-lesson"> 63 <p><i class="far fa-question-circle"></i>フリーランスにならなければいけないですか？<span><i class="fas fa-angle-down"></i></span></p> 64 </div> 65 66 <p class="questionAco">いいえ、必ずフリーランスにならないといけないわけではありません。 実際に過去の卒業生の方の進路も、独立、副業として続ける、就職するなど様々です。</p> 67 68 </div> 69 70 <div class="Qlesson"> 71 <div class="question-lesson"> 72 <p><i class="far fa-question-circle"></i>ノマドワーカー的に世界を旅しながら働きたい<br class="present2-br">です。可能ですか？</p><span class="question-span"><i class="fas fa-angle-down"></i></span> 73 </div> 74 75 <p class="questionAco">きちんと努力し、スキルを身に着けることができれば可能です。 iSaraは、「好きなときに働き、好きなときに遊ぶ」という人生を送れる人を増やすために開講しました。 ちなみに、講師は全員ノマドワーカーとして、働きながら自由に世界中を旅しています。</p> 76 77 </div> 78 79 <div class="Qlesson"> 80 <div class="question-lesson"> 81 <p><i class="far fa-question-circle"></i>学ぶプログラミング言語は何ですか？<span><i class="fas fa-angle-down"></i></span></p> 82 </div> 83 84 <p class="questionAco">HTML / CSS / PHPを学びます。どの言語も需要が高いです。</p> 85 86 </div> 87 88 <div class="Qlesson"> 89 <div class="question-lesson"> 90 <p><i class="far fa-question-circle"></i>将来的にwebアプリサービス、アプリ、メディア<br class="present2-br">を作りたいです。<span><i class="fas fa-angle-down"></i></span></p> 91 </div> 92 93 <p class="questionAco">経験してる講師がいますよ。大丈夫です。</p> 94 95 </div> 96 97 <div class="Qlesson"> 98 <div class="question-lesson"> 99 <p><i class="far fa-question-circle"></i>次回開催予定はありますか？<span><i class="fas fa-angle-down"></i></span></p> 100 </div> 101 102 <p class="questionAco">未定です。まずはお問合せください。</p> 103 104 </div> 105 106 <div class="Qlesson"> 107 <div class="question-lesson"> 108 <p><i class="far fa-question-circle"></i>海外に出るのが初めてで不安です。<span><i class="fas fa-angle-down"></i></span></p> 109 </div> 110 111 <p class="questionAco">講師陣が現地での生活をサポートしますので安心してください。ただしパスポート取得は必要です。</p> 112 113 </div> 114 115 <div class="Qlesson"> 116 <div class="question-lesson"> 117 <p><i class="far fa-question-circle"></i>タイ語、英語が一切話せません。参加可能<br class="present2-br">でしょうか。<span><i class="fas fa-angle-down"></i></span></p> 118 </div> 119 120 <p class="questionAco">タイ語スタッフ、英語スタッフがいるのでOKです。日本人、タイ人スタッフがおりますので、期間中のトラブル対応の心配は必要ありません。</p> 121 122 </div> 123 124 <div class="Qlesson"> 125 <div class="question-lesson"> 126 <p><i class="far fa-question-circle"></i>治安はどうでしょうか？<span><i class="fas fa-angle-down"></i></span></p> 127 </div> 128 129 <p class="questionAco">バンコクは、東南アジアや南アジアの他の国の都市部と比べると、街中も整備されており、非常に治安の良い街です。日本ほどではないですが、世界でも非常に治安の良い国として知られています。</p> 130 131 </div> 132 133 <div class="Qlesson"> 134 <div class="question-lesson"> 135 <p><i class="far fa-question-circle"></i>パソコンは必要ですか？<span><i class="fas fa-angle-down"></i></span></p> 136 </div> 137 138 <p class="questionAco">はい。ノートPCのご用意が必要です。</p> 139 140 </div> 141 142 </div> 143 </div> 144 </div>
CSS
1 2.question-wrapper{ 3 padding:60px 0px; 4} 5 6.question-logo{ 7 font-size:20px; 8} 9 10.question-wrapper{ 11 padding:70px 40px; 12} 13 14.question-logo{ 15 padding-bottom:40px; 16} 17 18.question-lessons{ 19 width:82%; 20 margin:0 auto; 21} 22 23.question-lesson{ 24 width:100%; 25 border:1px solid #ddd; 26 padding:15px; 27 margin-bottom:5px; 28 font-size:20px; 29 font-weight:bold; 30 text-align:left; 31 position: relative; 32} 33 34.questionAco{ 35 font-weight: bold; 36 text-align: left; 37 padding:30px 0 40px; 38 opacity:0.7; 39 display:none; 40} 41 42.question-lesson span{ 43 position:absolute; 44 bottom:0px; 45 right:10px; 46 opacity:0.1; 47 font-size:40px; 48} 49 50.question-span{ 51 position:absolute; 52 bottom:5px; 53} 54 55.fa-question-circle{ 56 color:#016ea9; 57} 58 59.question-lesson p:hover{ 60 text-decoration: underline; 61}
Javascript
1 2$(function(){ 3 $('#scroll_to_top').click(function(){ 4 $('body, html').animate({scrollTop: 0}, 300, 'linear'); 5 }); 6 7 $(window).scroll(function() { 8 // 「TOPに戻る」ボタンを取得します。 9 var $toTopButton = $('#scroll_to_top'); 10 11 // 縦にどれだけスクロールしたかを取得します。 12 var scrollTop = $(this).scrollTop(); 13 14 // ウィンドウの縦幅を取得します。 15 var windowHeight = $(this).height(); 16 17 if (scrollTop >= windowHeight) { 18 // ウィンドウの縦幅以上にスクロールしていた場合、 19 // 「TOPに戻る」ボタンを表示します。 20 $toTopButton.show(); 21 } else { 22 // ウィンドウの縦幅以上にスクロールしていない場合、 23 // 「TOPに戻る」ボタンを隠します。 24 $toTopButton.hide(); 25 } 26 27 //『アコーディオン部分』 28 29 30 $('.question-lesson').click(function() { 31 $(this).next().slideToggle(); 32 $("span i", this).toggleClass("fa-angle-up fa-angle-down"); 33}); 34 35 }); 36 37 38 $('.flow-left').click(function(){ 39 40 }); 41 42}); 43 44 45 46 47 48 49 50// ↓クリックで要素部分へ移動（header部をよけて） 51 52$(window).load(function(){ 53 $('.scroll-form').click(function(){ 54 var headerHeight=80 55 var scrollForm= $('.form').offset().top-headerHeight; 56 $('body,html').animate({scrollTop:scrollForm},300,'linear'); 57 }); 58 59}); 60 61```## 試したこと 62以下のprogateと同様のものを試したのですが、 63これを使用した際は、全く動くことも無く、アイコンの変化も起こりませんでした。 64 65```Javascript 66 67 $('.question-lesson’).click(function() { 68 var $answer = $(this).find('.questionAco’); 69 if($answer.hasClass('open')) { 70 $answer.removeClass('open'); 71 // slideUpメソッドを用いて、$answerを隠してください 72 $answer.slideUp(); 73 74 // 子要素のspanタグの中身をtextメソッドを用いて書き換えてください 75 $(this).find('span').html(’<i class="fas fa-angle-down"></i>’）; 76 77 } else { 78 $answer.addClass('open'); 79 // slideDownメソッドを用いて、$answerを表示してください 80 $answer.slideDown(); 81 82 // 子要素のspanタグの中身をtextメソッドを用いて書き換えてください 83 $(this).find('span').html('<i class="fas fa-angle-down"></i>’); 84 85 } 86 });
補足情報
・原因は一体何なにか？
・javascriptのコード以外に問題があるのか？
・この場合の最適のコード
など、教えていただければ幸いです。
お忙しいかと思いますが、回答お待ちしております。
動作確認してみましたが問題なく動くようですねぇうーむ？
コメントありがとうございます。
・$(this).next() は,問題なく.questionAcoを指していると思います。
・思う様に動く場合と、動かない場合が有ります、、、
→media queries で問題があるという可能性はあるでしょうか？
jsってこれで全部ですか？
$(function(){
$('#scroll_to_top').click(function(){
$('body, html').animate({scrollTop: 0}, 300, 'linear');
});
$(window).scroll(function() {
// 「TOPに戻る」ボタンを取得します。
var $toTopButton = $('#scroll_to_top');
// 縦にどれだけスクロールしたかを取得します。
var scrollTop = $(this).scrollTop();
// ウィンドウの縦幅を取得します。
var windowHeight = $(this).height();
if (scrollTop >= windowHeight) {
// ウィンドウの縦幅以上にスクロールしていた場合、
// 「TOPに戻る」ボタンを表示します。
$toTopButton.show();
} else {
// ウィンドウの縦幅以上にスクロールしていない場合、
// 「TOPに戻る」ボタンを隠します。
$toTopButton.hide();
}
//『アコーディオン部分』
$('.question-lesson').click(function() {
$(this).next().slideToggle();
$("span i", this).toggleClass("fa-angle-up fa-angle-down");
});
});
$('.flow-left').click(function(){
});
});
// ↓クリックで要素部分へ移動（header部をよけて）
$(window).load(function(){
$('.scroll-form').click(function(){
var headerHeight=80
var scrollForm= $('.form').offset().top-headerHeight;
$('body,html').animate({scrollTop:scrollForm},300,'linear');
});
});
ウィンドウのresize()をしてると、何度も開閉してしまうっていう現象があったみたいですけれど
resize()とかはしてませんか？
あとはstop()をつけてみるとか？
http://webteq.site/archives/1623
⬆️違います。これが全てのコードです。
お願いします。
jsは質問本文を修正して追記してくださ～～～～い
あ～質問文に最初から書いていたコードだと問題ないですが、
修正分に追記して頂いたコードを適用させるとぐいんぐいん開閉したので、
追記コード側が原因ですね
全てのjsのコードが問題なのですね。。
全て、というか、質問者さんが原因だと思ってた箇所が違いましたね。
回答1件
0
ベストアンサー
提示されたコード
jQuery
1$(function(){ 2 console.log("top"); 3 $('#scroll_to_top').click(function(){ 4 $('body, html').animate({scrollTop: 0}, 300, 'linear'); 5 }); 6 7 $(window).scroll(function() { 8 9 console.log("scroll"); 10 11 // 「TOPに戻る」ボタンを取得します。 12 var $toTopButton = $('#scroll_to_top'); 13 14 // 縦にどれだけスクロールしたかを取得します。 15 var scrollTop = $(this).scrollTop(); 16 17 // ウィンドウの縦幅を取得します。 18 var windowHeight = $(this).height(); 19 20 if (scrollTop >= windowHeight) { 21 // ウィンドウの縦幅以上にスクロールしていた場合、 22 // 「TOPに戻る」ボタンを表示します。 23 $toTopButton.show(); 24 } else { 25 // ウィンドウの縦幅以上にスクロールしていない場合、 26 // 「TOPに戻る」ボタンを隠します。 27 $toTopButton.hide(); 28 } 29 30 //『アコーディオン部分』 31 32 33 $('.question-lesson').on("click",function() { 34 35 console.log("click"); 36 37 $(this).next().slideToggle(); 38 $("span i", this).toggleClass("fa-angle-up fa-angle-down"); 39 }); 40 41 }); 42});
console 出力結果
scroll × 44回 click × 44回
修正後
jquery
1$(function(){ 2 console.log("top"); 3 $('#scroll_to_top').click(function(){ 4 $('body, html').animate({scrollTop: 0}, 300, 'linear'); 5 }); 6 7 $(window).scroll(function() { 8 console.log("scroll"); 9 // 「TOPに戻る」ボタンを取得します。 10 var $toTopButton = $('#scroll_to_top'); 11 12 // 縦にどれだけスクロールしたかを取得します。 13 var scrollTop = $(this).scrollTop(); 14 15 // ウィンドウの縦幅を取得します。 16 var windowHeight = $(this).height(); 17 18 if (scrollTop >= windowHeight) { 19 // ウィンドウの縦幅以上にスクロールしていた場合、 20 // 「TOPに戻る」ボタンを表示します。 21 $toTopButton.show(); 22 } else { 23 // ウィンドウの縦幅以上にスクロールしていない場合、 24 // 「TOPに戻る」ボタンを隠します。 25 $toTopButton.hide(); 26 } 27 }); 28 29 // ★ scrollイベントの外に出す (中に記述する必要なし） 30 //『アコーディオン部分』 31 $('.question-lesson').on("click",function() { 32 console.log("click"); 33 $(this).next().slideToggle(); 34 $("span i", this).toggleClass("fa-angle-up fa-angle-down"); 35 }); 36});
投稿2019/11/27 08:55
総合スコア2341
インデントがおかしいと、必要な処理を必要なところに入れることができず、
また不要な処理を想像と違うところに突っ込んでいる、なんてことがおこるので
インデントはきちんと整理しましょうね
あとデバッグが苦手なら F12を押してディベロッパーツールを表示して、
console.log()で出力してみると分かりやすくなりますよ
迅速な対応、分かりやすい詳しい説明、感謝します！！！
無事解決しました。
じっくり、間違えた箇所、ディベロッパーツールなどを確認して理解に努めたいと思います！
お忙しい中ありがとうございます。
あなたの回答
tips
プレビュー
