jQueryで開閉メニューを作成する例|slideToggle()で簡単にアコーディオンメニュー

今回はjQueryを利用して、アニメーションをする開閉メニュー(アコーディオンメニュー)を、簡単に作成する例となります。
jQueryで開閉メニュー(アコーディオンメニュー)を作成する例
jQueryのslideToggleメソッドでは、オブジェクトに指定した要素の高さを変化させ、表示・非表示を切り替えることができます。
以下の例では、そのslideToggleメソッドを利用しメニューの開閉を行っています。
See the Pen jQuery slideToggle by yic666kr (@yic666kr) on CodePen.
上記のアコーディオンメニューでは、まず、CSSでメニュー項目を display: none; で非表示とします。
そして、jQueryでonメソッドを利用し指定した要素がクリックされたら、slideToggleメソッドを実行し指定したメニュー項目の開閉を行っています。
slideToggleメソッドの引数について
slideToggleメソッドの引数には、以下の値を指定できます。
第1引数
アニメーションの変化スピードをミリ秒単位で指定できます。例えば 1500 を指定した場合、1.5秒かけてアニメーションを実行します。
また、次のいずれかの値でも指定できます。
- slow
- normal(デフォルト値)
- fast
第2引数
アニメーションのイージング(加速・減速)の設定値を、次のいずれかの値で指定できます。
- swing(デフォルト値)
- linear
また、イージングの種類はプラグインを追加することで増やすことができます。詳しくは以下のリンク先を参考にしてみてください。
第3引数
コールバック関数を指定できます。
CSSのみで開閉メニューを作成する場合
CSSのみでアニメーションをする開閉メニューを作成する方法については、以下のリンク先を参考にしてみてください。