Q&A
表題の通りですが、PCサイズでは動くのですが、レスポンシブ化したときに動かなくなります。
ソースコードとエラー文添付しますのでご教授いただけると嬉しいです。
JS
1 2jQuery('.qa-box-q').on('click', function() { 3 jQuery(this).next().slideToggle(); 4 jQuery(this).children('.qa-box-icon').toggleClass('is_open'); 5}) 6 7$('.slick').slick({ 8 autoplay:true, 9 slidesToShow:3, 10 autoplaySpeed: 5000, 11 arrows: false, 12 variableWidth: true, 13 adaptiveHeight:true, 14 responsive: [ 15 { 16 breakpoint: 1024,//モニターの横幅が769px以下の見せ方 17 settings: { 18 slidesToShow: 2.8,//スライドを画面に2枚見せる 19 slidesToScroll: 2.8,//1回のスクロールで2枚の写真を移動して見せる 20 } 21 }, 22 { 23 breakpoint: 768, 24 settings: { 25 slidesToShow: 1, 26 slidesToScroll: 1, 27 } 28 } 29 ] 30});
HTML
1 2 <section class="p-top_works"> 3 <h2 class="c-title-main">製作実績</h2> 4 <p class="c-title-sub">WORKS</p> 5 <ul class="p-top_works_list slick"> 6 <li class="p-top_works_item"> 7 <a href=""> 8 <div class="p-top_works_item_img"> 9 <img src="../assets/img/works01.jpg" alt=""> 10 </div> 11 <div class="p-top_works_item_textArea"> 12 <p class="p-top_works_item_textArea_title">株式会社サンプル採用サイトのコーディングを行いました！</p> 13 <div class="p-top_works_item_textArea_footer"> 14 <p class="p-top_works_item_textArea_skill">採用技術：jQuery,Bootstrap4</p> 15 <p class="p-top_works_item_textArea_skill">実装期間：2週間</p> 16 <p class="p-top_works_item_textArea_skill">担当コーダー：石井</p> 17 </div> 18 </div> 19 </a> 20 </li> 21 <li class="p-top_works_item"> 22 <a href=""> 23 <div class="p-top_works_item_img"> 24 <img src="../assets/img/works02.jpg" alt=""> 25 </div> 26 <div class="p-top_works_item_textArea"> 27 <p class="p-top_works_item_textArea_title">コーディングカンファレンスのイベントLPの制作を行いました！</p> 28 <div class="p-top_works_item_textArea_footer"> 29 <p class="p-top_works_item_textArea_skill">採用技術：jQuery,WordPress</p> 30 <p class="p-top_works_item_textArea_skill">実装期間：4週間</p> 31 <p class="p-top_works_item_textArea_skill">担当コーダー：石井</p> 32 </div> 33 </div> 34 </a> 35 </li> 36 <li class="p-top_works_item"> 37 <a href=""> 38 <div class="p-top_works_item_img"> 39 <img src="../assets/img/works03.jpg" alt=""> 40 </div> 41 <div class="p-top_works_item_textArea"> 42 <p class="p-top_works_item_textArea_title">株式会社サンプル様採用サイトのコーディングを行いました！</p> 43 <div class="p-top_works_item_textArea_footer"> 44 <p class="p-top_works_item_textArea_skill">jQuery,Bootstrap4</p> 45 <p class="p-top_works_item_textArea_skill">実装期間：2週間</p> 46 <p class="p-top_works_item_textArea_skill">担当コーダー：石井</p> 47 </div> 48 </div> 49 </a> 50 </li> 51 <li class="p-top_works_item"> 52 <a href=""> 53 <div class="p-top_works_item_img"> 54 <img src="../assets/img/works04.jpg" alt=""> 55 </div> 56 <div class="p-top_works_item_textArea"> 57 <p class="p-top_works_item_textArea_title">株式会社サンプル様通販サイトのコーデ 58 ィングを行いました！</p> 59 <div class="p-top_works_item_textArea_footer"> 60 <p class="p-top_works_item_textArea_skill">採用技術：jQuery,Bootstrap4</p> 61 <p class="p-top_works_item_textArea_skill">実装期間：6週間</p> 62 <p class="p-top_works_item_textArea_skill">担当コーダー：石井</p> 63 </div> 64 </div> 65 </a> 66 </li> 67 <li class="p-top_works_item"> 68 <a href=""> 69 <div class="p-top_works_item_img"> 70 <img src="../assets/img/works05.jpg" alt=""> 71 </div> 72 <div class="p-top_works_item_textArea"> 73 <p class="p-top_works_item_textArea_title">株式会社サンプル採用サイトのコーディングを行いました！</p> 74 <div class="p-top_works_item_textArea_footer"> 75 <p class="p-top_works_item_textArea_skill">採用技術：jQuery,Bootstrap4</p> 76 <p class="p-top_works_item_textArea_skill">実装期間：2週間</p> 77 <p class="p-top_works_item_textArea_skill">担当コーダー：石井</p> 78 </div> 79 </div> 80 </a> 81 </li> 82 </ul> 83 </section>
ulタグのクラスに.slickを付与してJSファイルで読み込ませています。
回答1件
0
ベストアンサー
過去に似たような質問がありました。
https://teratail.com/questions/26769
開示頂いたHTMLの中にqa-box-qやqa-box-iconが見当たりません。
HTMLの記載漏れか、（色々事情があると思いますが）開示頂いたHTMLは一部抜粋なのか
これ以上は判断付きかねますね・・・
投稿2021/07/23 00:22
総合スコア938
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。