Q&A
タイトルも内容も前の質問と変わってないように見受けられます。
https://teratail.com/questions/287486
解決したようには見えません。
質問は編集できますので、解決してないのでしたら回答を受けた結果で解決してない旨と現状を報告すべきですし、解決した上で今回の質問なのでしたら、前回と同じ印象の内容は避けるべきです。
質問1の回答が隠れた時に矢印を下向きに変えたい。
他の質問ではできたのですが、質問1だけなぜ下向きにできません。
一番上の回答は、他の回答が表示された時も常に表示させておきたいです。（一番上をクリックした時のみ一番上が隠れるように）
html
1<article class="question-area"> 2 <div class="row"> 3 <h2>質問</h2> 4 <div class="row-inner"> 5 <div class="qa"> 6 <div class="qa-item"> 7 <div class="default-question js-default-question"><span class="q">Q.</span>質問1<span class="arrow"></span></div> 8 <div class="default-answer"> 9 <p>回答1</p> 10 </div> 11 </div> 12 13 <div class="qa-item"> 14 <div class="question js-question"><span class="q">Q.</span>質問<span class="arrow"></span></div> 15 <div class="answer"> 16 <p>回答2</p> 17 </div> 18 </div> 19 20 <div class="qa-item"> 21 <div class="question js-question"><span class="q">Q.</span>質問<span class="arrow"></span></div> 22 <div class="answer"> 23 <p>回答3</p> 24 </div> 25 </div> 26 27 <div class="qa-item"> 28 <div class="question js-question"><span class="q">Q.</span>質問<span class="arrow"></span></div> 29 <div class="answer"> 30 <p>回答4</p> 31 </div> 32 </div> 33 34 <div class="qa-item"> 35 <div class="question js-question"><span class="q">Q.</span>質問<span class="arrow"></span></div> 36 <div class="answer"> 37 <p>回答5</p> 38 </div> 39 </div> 40 </div> 41 <a href=""> 42 <div class="circle-btn"> 43 <p>質問をもっと⾒る<span class="arrow-right"></span></p> 44 </div> 45 </a> 46 </div> 47 </div> 48</article>
css
1.question-area { 2 height: 940px; 3 width: 80%; 4 margin:0 auto; 5 border-bottom: 1px solid #D5D3D3; 6 padding: 125px 0 75px 0; 7 text-align: center; 8 } 9 10 .question-area h2 { 11 margin-bottom: 55px; 12 } 13 14 .qa { 15 text-align: left; 16 } 17 18 .qa .qa-item { 19 border-bottom: 1px solid #D5D3D3; 20 width: 100%; 21 margin-bottom: 40px; 22 } 23 24 .question { 25 padding: 10px 0; 26 font-size: 18px; 27 cursor: pointer; 28 } 29 30 .question .q { 31 font-size: 28px; 32 padding-right: 10px; 33 } 34 35 .default-question { 36 padding: 10px 0; 37 font-size: 18px; 38 cursor: pointer; 39 } 40 .default-answer { 41 cursor: pointer; 42 } 43 44 .default-question .q { 45 font-size: 28px; 46 padding-right: 10px; 47 } 48 49 .default-answer { 50 padding: 10px 0 10px 0; 51 font-size: 14px; 52 color: #626060; 53 } 54 55 .answer { 56 padding: 10px 0 10px 0; 57 font-size: 14px; 58 display: none; 59 cursor: pointer; 60 color: #626060; 61 } 62 63 .arrow { 64 transition: all 0.2s ease-in-out; 65 display: inline-block; 66 width: 15px; 67 height: 15px; 68 border-top: solid 2px #585858; 69 border-right: solid 2px #585858; 70 transform: rotate(135deg); 71 float: right; 72 margin-top: 20px; 73 } 74 75 .default-question .arrow { 76 transform: rotate(-45deg); 77 } 78 79 80 .question.open .arrow { 81 transform: rotate(-45deg); 82 top: 40%; 83 } 84 85 .default-question.open .arrow { 86 transform: rotate(135deg); 87 }
js
1jQuery(function($){ 2 3 4 5$(".default-answer").css("display", "block"); 6 7$(".js-question").click(function () { 8 $(".js-question").not(this).removeClass("open").next().slideUp(300); 9 $(this).toggleClass("open").next().slideToggle(300); 10}); 11 12 13$(".js-default-question").click(function () { 14 $(this).toggleClass(".default-open").next().slideToggle(300); 15}); 16 17 18});
js-default-questionをjs-questionに変えれば矢印の向きは変わりますが、一緒に表示も消えてしまいます。
回答1件
0
自己解決
js
1$(".js-default-question").click(function () { 2 $(this).toggleClass(".default-open").next().slideToggle(300); 3});
を
js
1$(".js-default-question").click(function () { 2 $(this).toggleClass("open").next().slideToggle(300); 3});
に変えた
投稿2020/08/26 21:40
総合スコア19
あなたの回答
tips
プレビュー
