/最終更新日:2019/06/30TechniqueCSSjQuery・JS先日「【CSS】CSSだけで作るアコーディオンメニュー」という記事を書きましたが、お役に立てたようで、意外とページビューも良くてありがたい限りです。今回はそれにあやかってせっかくなのでjQueryとCSSで作るアコーディオンメニューもやっていきたいと思います。どちらの方法でも問題はありませんが、テクニックの引き出しは多いに越したことはないですからね。ちなみに私はこっちのjQueryとCSSで作る派です。まとめアコーディオンメニューとは今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。メニュー1(クリックで開く)サブメニュー1サブメニュー2サブメニュー3サブメニュー4メニュー1(クリックで開く)サブメニュー1サブメニュー2サブメニュー3サブメニュー4メニュー1(クリックで開く)サブメニュー1サブメニュー2サブメニュー3サブメニュー4メニュー1(クリックで開く)サブメニュー1サブメニュー2サブメニュー3サブメニュー4前回のCSSのみのアコーディオンメニューとの違い前回のCSSのみのアコーディオンメニューの場合は、まずチェックボックスを「display:none」にして画面上には表示されない状態で配置します。チェックボックスのチェックがあるかないかでメニューの表示・非表示の切り替える、というやり方でした。自分で書いておいてあれですが、クリックのフラグとして非表示のチェックボックスを使うのがなんだかなぁと思います。シンプルに、jQueryで直接アコーディオンメニューの開閉操作をしていきます。ベースのHTML・CSS・jQueryまずはデモをご覧ください。サンプル1HTMLメニュー部分以外は割愛していますが、jQueryで操作するので下記の記事も参考にjQuery本体を読み込んでおいてください。「js-menu__item__link」をクリックした際の操作をjQueryで実装していきます。頭に「js-」をつけたクラスも書いているのは、jQueryで操作していることをわかりやすくするためです。「submenu」はjQueryで開閉操作するので非表示にしておきます。「js-menu__item__link」は複数ありますので、「each」内で「$(this)」と書いて、クリックされた「js-menu__item__link」のみに処理が実行されるようにします。「js-menu__item__link」がクリックされたタイミングで操作したいのは、その直後の「submenu」ですので、セレクタに「$(‘+.submenu’,this)」と書いています。CSSの+セレクタと同じで、隣り合っているすぐ直後の要素に適用することができます。jQueryの「slideToggle」で開閉操作をしています。凝ったアニメーションをしないなら「slideToggle」はめちゃくちゃ便利です。閉じていれば開くし、開いていれば閉じてくれます。アイコンで表示・非表示状態をわかりやすく前回同様、アイコンをつけて表示・非表示の状態をわかりやすくしましょう。Awesome」使用します。rel="stylesheet">ではこちらもまずはサンプルをご確認ください。サンプル2HTMLHTMLは一切変更なしです。1rem;}8行目〜「menu__item__link」のafter擬似要素でアイコンを表示するので、その部分のスタイルを追加します。20行目〜アコーディオンメニューが開いている時は、この後のjQueryで「on」クラスを付与し、アイコンを変えてわかりわすくします。追加したのはこの1行のみです。CSSでアイコンを切り変えるために、「toggleClass」で「on」を付け外しします。「toggleClass」も便利なメソッドで、指定したクラスがなければ「addClass」と同じくクラスを付与し、すでにあれば「removeClass」と同じくクラスを削除します。これでアイコンの切り替えができました。サンプル2まとめ今回は「jQueryとCSSで作るアコーディオンメニュー」をやってみました。ポイントとしては、なるべく無駄を減らして、自分のスキルに見合ったテクニックを身につけていくことです。冒頭のとおり、引き出しは多ければそれに越したことはないので、今までやっていなかったことにもチャレンジして経験値を上げていきましょう。前回の記事と比較してもらって違いを確認するのも面白いと思います。Day.GALLERYINSPIRATIONCONTACTTGIC。