【初心者】jQuery　hoverイベント／アコーディオン【備忘録１９】 #Progate

11/23～11/24に勉強したこと

hover(アイコン下に文章を出す)

１：指定するクラスにクラス名・hoverイベント設定

演習のページに、アイコンを設置(今回はレッスンアイコン)。
そのアイコンにhoverイベントを設定し、カーソルを持っていくと
下に文章が出てくるようにする。
【HTML】


<div class="lesson lesson-hover">...</div>

【jQuery(JS)】


$('lesson-hover').hover(
  function(){
   //マウスを乗せたときの処理
  },   //ここのカンマ忘れやすい！
  function(){
   //マウスが外れたときの処理
  }
);

消した状態⇒表示状態をCSSで書いておく


.text-contents{display:none;}

.text-active{display:block;}

addClassメソッド

【HTMLにて＜p class="text-contents"＞...＜/p＞がある前提】


$('.text-contents').addClass('text-active');

removeClassメソッド


$('.text-contents').removeClass('text-active');

※ここのメソッドで気を付けたいのが、後者の()の中のtext-activeの
前には「.」などは必要ないので気を付ける。

※表示するCSS【display:block;】を追加するのか、取り除くのかで出力を変化させる。

多数アイコンがあるときの注意！

text-contentsが複数ある際、そのまま書いてしまうと
すべてのアイコンに対して一気に処理がかかってしまうので
下記のように書くことを覚えておく！


$('.lesson-hover').hover(
  function(){
    $(this).find('.text-contents').addClass('text-active')
  },
  function(){
    $(this).find('.text-contents').removeClass('text-active')
);

アコーディオン機能

ページでQ&Aなどを設けた際によく使う機能。
クリックしたら下に答えが伸びて出てくるようなイメージ。
３つほどQ&Aがあるとすれば、同じ処理を行いたいのでクラス名を
共通のものにする必要がある。

【ここで使用するメソッド】

hasClass

引数に指定したものを、持っているかいないか判定する。

$('.answer').hasClass('open');
//false

$('answer open').hasClass('open');
//true

１：まず答え部分はCSSで非表示にしておく

２：同一クラス名を付ける

(今回はクリックして反応させるクラスを【faq-list-item】に設定)

３：クリックイベントを設定＆if文とhasClassを使って区別

$('.faq-list-item').click(function(){
//↑まずクリックイベントを設定！
    var $answer=$(this).find('.answer');
//↑この中で、子要素ひとつずつ反応するように、変数設定
    if($answer.hasClass('open')){
//もしopen要素を持っていれば・・・
      $answer.removeClass('open');
//openを取り除いて答え部分を隠す
      }else{
      $answer.addClass('open');
//そうでなければopenを追加して答え部分を表示させる          
      }
  });

ここまで書いた後に、実際の動作を間に書き足し

openを取り除いた時の動作⇒slideUpで隠す／spanの-を+に書き換え
openを追加した時の動作⇒slideDownで表示／spanの+を-に書き換え

$('.faq-list-item').click(function(){
    var $answer=$(this).find('.answer');
    if($answer.hasClass('open')){
      $answer.removeClass('open');
      $answer.slideUp();
      $(this).children('span').text('+');

      }else{

      $answer.addClass('open');
      $answer.slideDown();
      $(this).children('span').text('-');         
      }
  });

気を付けたいこと

-　自分で書くときに、$(this).children...や.findの使い方がまだ理解が甘い。再度復習しなければいけないと感じた。
-　変数を使うと楽に書くことができたので、実践的に使えるように覚えておく。
-　未だにjQueryを書いていく際、クラス時は「.」id時は「#」を抜かすことがあるので気を付ける。

【初心者】jQuery hoverイベント／アコーディオン【備忘録１９】