最近特にスマホの案件が増えてる・・・というよりも、セットで当たり前になってます。スマホはディスプレイの表示領域がPCに比べて少ないので、ファーストビューはもちろん、スライドした下の領域も少ないスペースを有効に使って、ユーザーにいち早く情報を伝える必要があります。そんな訳で今回はjQueryのtoggleメソッドを使った定番のアコーディオンメニューを備忘録としてまとめておきます。アコーディオンメニューはjQueryの「slideUp()」や「slideDown()」が一般的なようですが、今回はToggle()を使用して、アコーディオンメニューを実装させてみます。toggleメソッドの概要jQuery日本語リファレンスによると...各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものは表示状態にします。jQuery日本語リファレンスより引用ある要素に設定することによって、表示・非表示を切り替えるjQueryメソッドという事でおけっすか?その他に「slideToggle」でslideDown/slideUpの動作や「toggleClass」でスイッチの切り替えとかができます。「slideToggle」を使ってシンプルなアコーディオンメニューを作成まず、元となるメニューをHTMLとCSSで組みます。ul」を「display:none;」で非表示にさせて、Toggleを使って「display:block;」と切り替える動きです。});</script>「slideToggle()」のカッコの中に”fast”、”normal”、”slow”、”1000(数値入力)”をすれば、スピードの調整も可能です。DEMO「toggleClass」を使ってオープン時とクローズ時の画像を切り替えるこのままでもいいんですが、メニューが開いてる状態と閉まってる状態を切り替えた方がユーザビリティー的にもいい場合があります。いう時は「toggleClass」を追加します。url(img/close.png);}さっきのCSSコードにこのコードを入れればOKです。background画像として矢印の画像を指定して、active時の画像も指定しているだけです。});</script>DEMOまとめスマホサイトでは、何かと使用頻度の多いアコーディオンメニューもtoggleメソッドを使えば、短い文章量でサクッと実装できるので重宝します。この辺の基本は抑えて円滑にサイト構築を進めて行きたい所ですね。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。