はじめに
今回は、下記のサイトを参考に、開閉時の動きに着目しながら２つアコーディオンメニューを制作していきます。
シンプルなアコーディオンメニュー
See the Pen jQueryでアコーディオンメニューを作る by Uka Suzuki (@uukasuzuki_) on CodePen.
jQueryのコード解説
-
.next()は、隣接する（直後にある）要素を指定します。
今回にように $(this).next().slideToggle();と記載する場合、「.accordion-header以降の要素に対して、slideToggleメソッドを実行ということになります。」
- .slideToggleとは、特定の要素を縦方向にアニメーションしながら表示・非表示することができるメソッドのことを指します。
- .toggleClassとは、指定したクラスが要素に無ければ追加し、あれば削除するという意味です。今回の場合は、「.according-headeractiveクラスがついていなかったら追加し、ついていたら削除する」という実行を表しています。
最初の一つだけ開いているアコーディオンメニュー
See the Pen 最初の一つだけ開いているアコーディオンメニュー by Uka Suzuki (@uukasuzuki_) on CodePen.
jQueryのコード解説
- $("セレクタ:nth-child(引数)")は、親要素内にあるセレクタで、引数で指定した要素を選択します。:nth-child()は、特定番目の要素を取得するのに使いますが、今回使用する時の使い方が理解できません。
$(".accordion-header:nth-child(1)").addClass("active");
$(".accordion-content:nth-child(2)").css("display", "block");
１番目の意味は、.addClassを指定し「２番目の要素を開けたままにして(=１番目の.accordion-contentのこと)」と実行していると考えました。
２番目の意味は、CSSのdisplay: block;を指定して、「.accordion-contentの中身をまとめているのでは？」と考えました。
- .addClassとは、任意の要素にclass属性を追加することができるメソッドという意味を指します。テキストやボタンをクリックし、classが追加されて背景色が変化したり、要素を非表示にすることができます。
まとめ
次回は、更に要素の非表示の仕組みと考え方の理解を深めるため、簡単なタブメニューを制作していきます。