Help us understand the problem. What is going on with this article?

toggleメソッドで表示→非表示のイベント実装

More than 1 year has passed since last update.

こんばんは!今日はjs/jQueryで実装する部分があり、その中でtoggleがめちゃ便利だったので備忘録として。

toggleメソッドとは?

toggleメソッドは表示・非表示を切り替える事ができるjQueryの便利なメソッド。hideとshowが合体したメソッド。

js/jQueryでclickイベントを実装したい

実装したい事

demo
①クリックしたら画像部分が表示される
②もう一度クリックしたら画像部分が非表示になる
※ちなみgyazo gifをqittaで表示する方法は![demo](http://gyazo.com/xxxxxxxxxx/raw)でいけます

GyazoでアップロードしたGifアニメーションを簡単に表示する方法。(URLのみでOK)https://qiita.com/Kobutorina_hato/items/d28d4cc90096e058566d

準備

gem 'jquery-rails'を記述
bunde installします

application.js
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery #追加
//= require jquery_ujs #追加

jQueryのライブラリを読み込ませましょう。JavaScriptの前に記述しないとエラーします

app/views/layouts/application.html.erb
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

これを実行する事でスクリプトファイルの読み込むためにスクリプトファイルを自動的に生成してくれます

うまくいかない

sample.html.haml
.new-member-registration-form-content__group.whatnumber-text-right
  .signup-seqcode-text
    %i.fas.fa-question-circle{ style: "color:royalblue;" }
    カード裏面の番号とは?
    .signup-seqcode-info

classのsignup-seqcode-infoをクリックしたらイベント発火させたい

sample.js
$(function() {
  let btn = document.querySelector(".signup-seqcode-text");
  let image = `<div class="signup-seqcode-info is-show">
                  カードの裏面をご残照下さい。
                  <img src="//www
                  ://表示したい画像のURL" alt="" width="240">
              </div>`

  btn.addEventListener("click", function() {
    $(".signup-seqcode-info").html(image);
  });
});

指定のクラス名.signup-seqcode-textをクリックすると変数image.signup-seqcode-info要素の下に表示されるように実装できた。しかし表示はできるがどうすれば非表示にできるか分からない。off()やremove()使ってみたが、動的に出現したhtmlを消す方法がうまくいかず。

toggleメソッドで簡単に実装できた

今日のメインテーマのtoggle登場。色々調べて書いてみて動かなくてを繰り返していたら、toggleメソッドだったら簡単にいけるのではないかと。

sample.haml
.new-member-registration-form-content__group.whatnumber-text-right
            .signup-seqcode-text
              %i.fas.fa-question-circle{ style: "color:royalblue;" }
              カード裏面の番号とは?
              .signup-seqcode-info
              .signup-seqcode-info.is-show
                カードの裏面をご参照下さい
                = image_tag "//www://表示したい画像.png?3312594182", alt: "", width: "240"

表示したい文字カードの裏面をご参照下さいと画像部分=image_tagはhamlに書いておく
.signup-seqcode-info.is-showはクリックして動的に追加したDOM要素に与えるクラス

sample.scss
.signup-seqcode-info.is-show {
  width: 300px;
  display: none;
  position: absolute;
  top: 6px;
  z-index: 1;
  padding: 16px;
  border-radius: 6px;
  background: #eee;
  text-align: center;
  color: #333;
  line-height: 1.5;
  img {
    padding-top: 10px;
  }
}

cssでdisplay:none;にしてデフォルト時は非表示にする
デフォルト時は見えないですが、クリックして出現する時にどこに表示したいかをcssで決めておきましょ。ポイントはz-index: 1;を忘れると他の要素の下に潜り込みますのでご注意を。

sample.js
$(function() {
  $('.signup-seqcode-text').click(function() {
    $('.is-show').toggle();
  })
});

指定したクラス名.signup-seqcode-textをクリックするとイベント発火
toggleはクリック1回目showイベント発火で.is-show部分が表示される
クリック2回目hideイベントで.is-show部分が非表示になる

↓↓完成形をもう一度↓↓
demo

最初は二回clickイベントを作る必要があると思っていたがtoggleメソッド使えば超短い記述で実装できた

toggleは引数も指定できる

【 対象要素.toggle( ミリ秒 ) 】
◯ミリ秒かけて表示・非表示が行われる

【 対象要素.toggle( ミリ秒, 関数 ) 】
◯ミリ秒かけて表示・非表示をした後に関数を実行する事もできます(これ実装してないので詳しくは割愛)

toggleはアニメーションも設定できる

  • 【 fast 】:素早く非表示にする
  • 【 slow 】:ゆっくり非表示にする
  • 【 swing 】:デフォルトの非表示スタイル
  • 【 linear 】:一定の速度で非表示にする

toggle兄弟いろいろ

詳しい説明は省略しますが、「fadeToggle()」,「toggleClass()」,「slideToggle()」はよく使われるいたいです

fadetoggle()はじわーっと表示・非表示にしてくれます

toggleClass()は対象となる要素のclass属性値を追加したり削除したりを繰り返すことが可能なメソッド

slideToggle()は特定の要素を縦方向にアニメーションしながら表示・非表示する事ができます

この辺りはフロント実装で使えそうなので下記サイトを参考に使ってみたいなぁと思います

30分で理解!jQueryのtoggle()と3種のメソッド活用術!
https://www.sejuku.net/blog/40705

まとめ

そういえば以前にもtoggleってなんだろ?ってちょろっと調べた事ありました。ただ実際に動かす機会がないと分かりませんね。js/jQuery苦手なんですけど(他が得意なわけではない笑)、やっぱり見た目の変化が分かりやすいので意図した動きになった時は楽しいです。

終わり

suzy1031
駆け出しエンジニア。ruby rails jQuery AWS Java React
https://suzyanamateurengineer.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away