https://style01.net/1245/
こちらのデモのアコーディオンが開く(moreが開く速度)速度設定をしたいのです。
JSのどこに どのようなものを記述すれば良いでしょうか。
HTML
1 <div class="block"> 2 <div class="box"> 3 <div class="box-inner"> 4 box-innerの縦幅が180pxを超えるとmoreが出現する<br> 5 テキスト<br> 6 テキスト<br> 7 テキスト<br> 8 テキスト<br> 9 テキスト<br> 10 テキスト<br> 11 テキスト<br> 12 テキスト<br> 13 テキスト<br> 14 テキスト<br> 15 テキスト<br> 16 </div> 17 </div> 18 </div> 19 <div class="block"> 20 <div class="box"> 21 <div class="box-inner"> 22 縦幅180pxを超えない場合は出ない 23 </div> 24 </div> 25 </div>
SCSS
1.block{ 2 margin-bottom: 30px; 3} 4.box{ 5 max-width: 600px; 6 margin: 0 auto; 7 background: #ddd; 8 overflow: hidden; 9} 10.box-inner{ 11 padding: 10px 20px; 12} 13.more{ 14 height: 55px; 15 line-height: 55px; 16 margin-top: -25px; 17 text-align: center; 18 color: #2e9ce5; 19 cursor: pointer; 20 21 background: rgba(255,255,255,0); 22 background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 100%); 23 background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(0%, rgba(255,255,255,0)), color-stop(31%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1))); 24 background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 100%); 25 background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 100%); 26 background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 100%); 27 &:after{ 28 content:'↓'; 29 display: inline-block; 30 font-weight: bold; 31 font-size: 18px; 32 -webkit-transition: .3s; 33 transition: .3s; 34 } 35 &.is-active{ 36 &:after{ 37 -webkit-transform:rotate(180deg); 38 transform:rotate(180deg); 39 } 40 } 41}
JS
1$(function(){ 2 3 var box = $('.box'); 4 box.after('<div class="more">MORE</div>'); 5 var more = $('.more'); 6 7 function remClass(){ 8 $(this).next(more).removeClass('is-active'); 9 } 10 function adClass(){ 11 $(this).next(more).addClass('is-active'); 12 } 13 14 //forで.box-innerの高さを取得、縦幅が180pxより小さい場合.moreをhideする 15 for(var i=0;i<box.length;i++){ 16 var boxInnerH = $('.box-inner').eq(i).innerHeight(); 17 if(boxInnerH<180){ 18 more.eq(i).hide(); 19 }else{ 20 box.eq(i).css({ 21 height:'180px' 22 }); 23 } 24 } 25 26 more.on('click',function(){ 27 28 //複数あった時を考慮 29 //クリックした.moreに対応する.box-innerの高さを取得する 30 var index = more.index(this); 31 var boxThis = box.eq(index); 32 var innerH = $('.box-inner').eq(index).innerHeight(); 33 34 if($(this).hasClass('is-active')){ 35 boxThis.animate({ 36 height:'180px' 37 },200,remClass); 38 }else{ 39 boxThis.animate({ 40 height:innerH 41 },200,adClass); 42 } 43 }); 44});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/27 09:42