似た質問が過去に数点挙がっておりましたが、どうしても理解が難しく、質問させていただきました。
html
1<div id="test_area"> 2 <div class="test_acd_pomy"> 3 <p><span>タイトルタイトル</p> 4 </div> 5 <div class="test_acd_area"> 6 <p>テキストテキストテキストテキストテキスト</p> 7 </div> 8</div>
css
1.test_acd_pomy { margin: 0 auto; } 2.test_acd_pomy:before { content: ""; position: absolute; display: block; right: 0; left: 0; background: url("../img/nav_click.png") center top no-repeat; background-size: 100% auto; margin: auto; } 3.test_acd_pomy.on:before { background: url("../img/nav_close.png") center top no-repeat; background-size: 100% auto; } 4.test_acd_pomy:after { content: ""; position: absolute; display: block; right: 0; left: 0; background-color: #002e62; margin: auto; border-radius: 50%; } 5.test_acd_pomy.on:after { background-color: #737373; } 6.test_acd_pomy p { color: #023063; text-align: center; } 7.test_acd_pomy p:before,.message_acd_pomy p:after { content: ""; position: absolute; display: block; right: 0; left: 0; z-index: 1; margin: auto; border: solid #fff; } 8.test_acd_pomy p:before { transform: translateX(-50%); } 9.test_acd_pomy p:after { transform: rotate(90deg); } 10.test_acd_pomy.on p:after { content: none; } 11.test_acd_area { display: none; }
js
1 /* アコーディオン */ 2 $(".test_acd_pomy").on("click", function(){ 3 if($(this).hasClass("on")){ 4 $(this).removeClass("on").next(".test_acd_area").slideUp(); 5 }else { 6 $(this).addClass("on").next(".test_acd_area").slideDown(); 7 } 8 });
※nav_click.pngとnav_close.pngは「Click」「Close」画像となります。
プラスマークボタンはCSSで実装しております。
今回の仕様ルールとしまして
①PC表示(幅751px以上)時はアコーディオン解除され、最初からコンテンツがすべて表示される。
②SP表示時にアコーディオンを閉じた状態でPC幅に広げると自動でコンテンツが表示される。
②で苦戦してしまいましたので改善方法をデモにてご教授お願いいたします・・・。
※追記
js
1 if (window.matchMedia( "(max-width: 750px)" ).matches) { 2 3 $(".message_acd_pomy").on("click", function(){ 4 if($(this).hasClass("on")){ 5 $(this).removeClass("on").next(".message_acd_area").slideUp(); 6 }else { 7 $(this).addClass("on").next(".message_acd_area").slideDown(); 8 } 9 }); 10 11 } else { 12 $(".message_acd_pomy:not(.categories)").on("click", function(){ 13 return false; 14 }); 15 }
現在上記のような形となっておりますが、スマホサイズからPCサイズに変更時にアコーディオンがリセットされない状況となっております。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/15 04:38
2020/04/15 04:50
2020/04/15 04:54
2020/04/15 06:05