More than 3 years have passed since last update.

初学者のJavaScript　開閉機能のプログラミング

Posted at 2021-03-08

##jQueryでtoggleClassメソッドを利用した開閉機能

  $(document).ready(function(){
    $('#button').on('click', function(){
      $('#hoge').toggleClass('show');
    });
  });

HTML要素のhoge(ID名)にtoggleClassでshowをクリック時に追加、削除するプログラム。クラスセレクタshowにCSSを記述しておくことで、表示/非表示をクリック時に切り替えることができる。

showのCSS
.show {
  transform: translate3d(-300px, 0, 0);
}

アニメーション
#hoge {
  transition: transform 0.3s;
}

showが付加されるとページ全体が左に300px移動する（-300px）。すると、ページ左に見切れているサイドメニューがページ全体がスライドすることで見られるようになる仕組み。transitionによってアニメーションを付加している。

さいごに

プログラミングの初学者です。その日に学んだことを学習の一環としてアウトプットしています。より深く学習していきたいと考えておりますので、ご指摘等いただけますと幸いです。

参考図書：確かな力が身につくJavaScript「超」入門　第２版　著者：加納祐東