Q&A
});*/ ←これ本当に入ってますか？
あとHTMLも提示してください。
前提・実現したいこと
該当のソースコード
HTML
1<section class="faq" id="faq"> 2 <div class="question"> 3 <div class="item1"> 4 <p>A</p> 5 </div> 6 <div class="item2"> 7 <p>B</p> 8 </div> 9 <div class="item3"> 10 <p>C</p> 11 </div> 12 <div class="item4"> 13 <p>D</p> 14 </div> 15 <div class="item5"> 16 <p>E</p> 17 </div> 18 <div class="item6"> 19 <p>F</p> 20 </div> 21 </div> 22 <div class="answer"> 23 <div class="answer1"> 24 <div class="answer-wrap"> 25 <div class="question-title"> 26 <h3>Aに関する質問1</h3> 27 </div> 28 <div class="answer-text"> 29 <p>回答が入ります。</p> 30 </div> 31 </div> 32 <div class="answer-wrap"> 33 <div class="question-title"> 34 <h3>Aに関する質問2</h3> 35 </div> 36 <div class="answer-text"> 37 <p>回答が入ります。</p> 38 </div> 39 </div> 40 </div> 41 <div class="answer2"> 42 <div class="answer-wrap"> 43 <div class="question-title"> 44 <h3>Bに関する質問1</h3> 45 </div> 46 <div class="answer-text"> 47 <p>回答が入ります。</p> 48 </div> 49 </div> 50 <div class="answer-wrap"> 51 <div class="question-title"> 52 <h3>Bに関する質問2</h3> 53 </div> 54 <div class="answer-text"> 55 <p>回答が入ります。</p> 56 </div> 57 </div> 58 <div class="answer-wrap"> 59 <div class="question-title"> 60 <h3>Bに関する質問3</h3> 61 </div> 62 <div class="answer-text"> 63 <p>回答が入ります。</p> 64 </div> 65 </div> 66 <div class="answer-wrap"> 67 <div class="question-title"> 68 <h3>Bに関する質問4</h3> 69 </div> 70 <div class="answer-text"> 71 <p>回答が入ります。</p> 72 </div> 73 </div> 74 </div> 75 <div class="answer3"> 76 <div class="answer-wrap"> 77 <div class="question-title"> 78 <h3>Cに関する質問1</h3> 79 </div> 80 <div class="answer-text"> 81 <p>回答が入ります。</p> 82 </div> 83 </div> 84 </div> 85 <div class="answer4"> 86 <div class="answer-wrap"> 87 <div class="question-title"> 88 <div class="question-h3"> 89 <h3>Dに関する質問1</h3> 90 </div> 91 <div class="question-text"> 92 <img src="img/question-howto-text.png"> 93 </div> 94 </div> 95 <div class="answer-text"> 96 <p>回答が入ります。</p> 97 </div> 98 </div> 99 <div class="answer-wrap"> 100 <div class="question-title"> 101 <div class="question-h3"> 102 <h3>Dに関する質問2</h3> 103 </div> 104 <div class="question-text"> 105 <img src="img/question-howto-text.png"> 106 </div> 107 </div> 108 <div class="answer-text"> 109 <p>回答が入ります。</p> 110 </div> 111 </div> 112 <div class="answer-wrap"> 113 <div class="question-title"> 114 <div class="question-h3"> 115 <h3>Dに関する質問3</h3> 116 </div> 117 <div class="question-text"> 118 <img src="img/question-howto-text.png"> 119 </div> 120 </div> 121 <div class="answer-text"> 122 <p>回答が入ります。</p> 123 </div> 124 </div> 125 </div> 126 <div class="answer5"> 127 <div class="answer-wrap"> 128 <div class="question-title"> 129 <div class="question-h3"> 130 <h3>Eに関する質問1</h3> 131 </div> 132 <div class="question-text"> 133 <img src="img/question-howto-text.png"> 134 </div> 135 </div> 136 <div class="answer-text"> 137 <p>回答が入ります。</p> 138 </div> 139 </div> 140 <div class="answer-wrap"> 141 <div class="question-title"> 142 <div class="question-h3"> 143 <h3>Eに関する質問2</h3> 144 </div> 145 <div class="question-text"> 146 <img src="img/question-howto-text.png"> 147 </div> 148 </div> 149 <div class="answer-text"> 150 <p>回答が入ります。</p> 151 </div> 152 </div> 153 </div> 154 <div class="answer6"> 155 <div class="answer-wrap"> 156 <div class="question-title"> 157 <div class="question-h3"> 158 <h3>Fに関する質問1</h3> 159 </div> 160 <div class="question-text"> 161 <img src="img/question-howto-text.png"> 162 </div> 163 </div> 164 <div class="answer-text"> 165 <p>回答が入ります。</p> 166 </div> 167 </div> 168 <div class="answer-wrap"> 169 <div class="question-title"> 170 <div class="question-h3"> 171 <h3>Fに関する質問2</h3> 172 </div> 173 <div class="question-text"> 174 <img src="img/question-howto-text.png"> 175 </div> 176 </div> 177 <div class="answer-text"> 178 <p>回答が入ります。</p> 179 </div> 180 </div> 181 <div class="answer-wrap"> 182 <div class="question-title"> 183 <div class="question-h3"> 184 <h3>Fに関する質問3</h3> 185 </div> 186 <div class="question-text"> 187 <img src="img/question-howto-text.png"> 188 </div> 189 </div> 190 <div class="answer-text"> 191 <p>回答が入ります。</p> 192 </div> 193 </div> 194 </div> 195 </div> 196</section>
該当のソースコード
jQuery
1 $('.answer1 ,.answer2 ,.answer3 ,.answer4 ,.answer5 ,.answer6').hide(); 2 3 $('.faq .item1').click(function () { 4 $(this).css('background', '#c3d056'); 5 $('.faq .answer1').slideToggle(500); 6 $('.answer2 ,.answer3 ,.answer4 ,.answer5 ,.answer6').hide(); 7 $('.faq .item2 ,.faq .item3 ,.faq .item4 ,.faq .item5 ,.faq .item6').css('background', 'white'); 8 }); 9 10 $('.faq .item2').click(function () { 11 $(this).css('background', '#c3d056'); 12 $('.faq .answer2').slideToggle(500); 13 $('.answer1 ,.answer3 ,.answer4 ,.answer5 ,.answer6').hide(); 14 $('.faq .item1 ,.faq .item3 ,.faq .item4 ,.faq .item5 ,.faq .item6').css('background', 'white'); 15 }); 16 17 $('.faq .item3').click(function () { 18 $(this).css('background', '#c3d056'); 19 $('.faq .answer3').slideToggle(500); 20 $('.answer1 ,.answer2 ,.answer4 ,.answer5 ,.answer6').hide(); 21 $('.faq .item1 ,.faq .item2 ,.faq .item4 ,.faq .item5 ,.faq .item6').css('background', 'white'); 22 }); 23 24 $('.faq .item4').click(function () { 25 $(this).css('background', '#c3d056'); 26 $('.faq .answer4').slideToggle(500); 27 $('.answer1 ,.answer2 ,.answer3 ,.answer5 ,.answer6').hide(); 28 $('.faq .item1 ,.faq .item2 ,.faq .item3 ,.faq .item5 ,.faq .item6').css('background', 'white'); 29 }); 30 31 $('.faq .item5').click(function () { 32 $(this).css('background', '#c3d056'); 33 $('.faq .answer5').slideToggle(500); 34 $('.answer1 ,.answer2 ,.answer3 ,.answer4 ,.answer6').hide(); 35 $('.faq .item1 ,.faq .item2 ,.faq .item3 ,.faq .item4 ,.faq .item6').css('background', 'white'); 36 }); 37 38 $('.faq .item6').click(function () { 39 $(this).css('background', '#c3d056'); 40 $('.faq .answer6').slideToggle(500); 41 $('.answer1 ,.answer2 ,.answer3 ,.answer4 ,.answer5').hide(); 42 $('.faq .item1 ,.faq .item2 ,.faq .item3 ,.faq .item4 ,.faq .item5').css('background', 'white'); 43 });
回答2件
0
解決済みですかせっかく書いたので。
css
1.question > div.select { 2 background: #c3d056; 3}
jQuery
1$(function(){ 2 $('.faq .answer > div').hide(); 3 $('.question > div').on('click',function () { 4 var idx=$(this).index(); 5 $('.faq .answer > div').eq(idx).slideToggle(500).siblings().hide(); 6 $(this).toggleClass('select').siblings().removeClass('select'); 7 }); 8});
投稿2021/01/13 04:39
編集2021/01/13 04:49
総合スコア34073
0
ベストアンサー
HTMLの構造次第ですね
インデックスをつかって処理すれば1/6になると思います
投稿2021/01/13 03:15
総合スコア116661
CをクリックするとB4がでたり
FをクリックするとE2/E3が出てきたりするのは仕様ですか？
ご回答ありがとうございます。HTML提示しました。この構造の場合、インデックスをどのように使えば良いでしょうか。
CをクリックするとC1、BをクリックするとB1/B /B3/B4が出ます。
本物のコードには、実際の質問と回答が入っているので、変更しましたが、ずれていたようです。すみません。正しく変更します。
相対位置をつかってやるとこんな感じ
$(function(){
$('.answer >div').hide();
$('.question >div').on('click',function () {
var idx=$('.question >div').index(this);
$('.answer >div').hide().eq(idx).slideToggle(500);
$('.question >div').css('background', 'white');
$(this).css('background', '#c3d056');
});
});
ありがとうございます！勉強になります。
あ、「同じボタンを2回クリックした時、白に戻る」が未実装ですが
ボタンを戻して、回答を消すのでしょうか？
何度もありがとうございます。白に戻して、回答を消したいです。こちらを追加するとどのようになりますか？
背景色はクラスで調整したほうが良いでしょう
まずcssでこうします
.question >div.is-active{background-Color:#c3d056}
.question >div{background-Color:white}
これを以下で調整します
$(function(){
$('.answer >div').hide();
$('.question >div').on('click',function () {
var idx=$('.question >div').index(this);
$('.answer >div').not(':eq('+idx+')').hide().end().eq(idx).slideToggle(500);
$('.question >div').not(':eq('+idx+')').removeClass('is-active').end().eq(idx).toggleClass('is-active');
});
});
無事動きました。数少ない引き出しが増えて嬉しいです。ご丁寧に何度もありがとうございました！
相対位置のとりかた次第なのでhatena19さんのようなsiblingsは
有効だと思います。
またclassやカスタムデータなどをつかって1対1で紐付ける方法も
あるので少しずつ知識をためていくとよいでしょう
ちなみにcssのbackgroundで色を書き換えるのは楽ですが
参照するのが非常に面倒です。（jQueryのバージョンによっても
参照方法が異なる）。ですのでクラスの付替えでの色変えを
今回はおすすめしています
わかりやすいご説明ありがとうございます！投稿前にclassを使って１対１でやってみたのですが上手くいかず、、、自分のものになるようまた挑戦します。
今回の質問で初めて知ったことが色々出てきて勉強になり、習得したいことが明確になりました。ありがとうございます！
あなたの回答
tips
プレビュー
