webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

jQueryの導入

制作を進めていた既存サイトのトレースに以下のjQueryを導入します。


  • スムーススクロール
  • アコーディオンパネル
  • テキストとボタン画像の切り替え
//スムーススクロール
$(function() {
  $("#to-top>a").on('click', function () {
    $('html,body').animate({ scrollTop: 0 }, 'swing');
      return false;
    });
});

//もっと見るボタン
$(function() {
 var flg = "off";
$('p.more').on('click', function(){
$(this).siblings('dl').children('dt:nth-of-type(n+4),dd:nth-of-type(n+4)').slideToggle(0);
//文字の切り替え
 if(flg == "off"){
      $(this).text('閉じる').css('background','url(img/switch_001_close.png) no-repeat 29% center');
      flg = "on";
    }else{
		$(this).text('もっと見る').css('background','url(img/switch_001_open.png) no-repeat 29% center');
      flg = "off";
		}
});
});


//resizeの設定
$(window).on('load resize', function(){
if($(window).innerWidth() < 641 ){
	//スマホの時
	$('dt:nth-of-type(n+4),dd:nth-of-type(n+4)').hide();
}else{
	//タブレット・PCの時
	$('dt:nth-of-type(n+4),dd:nth-of-type(n+4)').show();
}
});