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

##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時は「#」を抜かすことがあるので気を付ける。