jQuery~中級編(アコーディオン機能)~

プログラミングの勉強日記

2020年5月30日　Progate Lv.76

アコーディオン機能

　クリックすることで隠れている詳細を展開表示させる機能のこと。今回はFAQに実装して、質問をクリックするとその答えがスライド表示/非表示されるのを作る。

1.隠したい部分（答えの部分）をCSSで非表示にする
2.クリックする部分（質問部分）には同一のクラス名にする
3.それらのclickイベントを作る

<div class="answer">...</div>
<div class="answer open">...</div> <!--openは答えを表示するときの目印-->

hasClassメソッド

　引数に指定したクラスをオブジェクトを持っているか判定するときに使う。（持っていればtrueを、持っていなければfalseを返す）

<div class="answer">...</div>
<div class="answer open">...</div> 

$('.answer').hasClass('open'); //結果はfalse
$('.answer open').hasClass('open'); //結果はtrue

ifの使用

　隠れた部分（答えの部分）の表示/非表示に使う。質問をクリックしたときに$('answer')がすでにopenクラスを持っているなら（＝すでに表示されている）、openクラスを外して答えを隠す。（openクラスがないときは逆のことをする）

if($('answer').hasClass('open')){
  //openクラスを外す処理と答えを隠す処理
}else{
  //openクラスをつける処理と答えを表示する処理
}

　このif文がtrueのとき、答えの部分はslideUpメソッドで隠す。逆にif文がfalseのときはslideUpメソッドで表示する。（アコーディオンのスライド操作）