クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery

jQuery アコーディオンメニューを自作サンプル(slideToggle)

投稿日:2017年12月2日 更新日:

クリックすれば開閉される「アコーディオンメニュー」は良く使うと思います。
プラグインも多く出ており簡単に実装することができますが、プラグインだとデザインを変更する時に苦労したりします。

プラグインからの装飾に苦労するようであれば、自分で作ったほうが早いかもしれませんね。
アコーディオンメニューはjQueryで簡単に作成することができますので、作り方を解説しようと思います。

簡単なサンプルも作りました。

HTML(アコーディオンメニュー)

「ul」と「li」を使って階層を作ります。
「aタグ」に「menu」というクラスを付けておき、クリックされるとメニューを開閉させます。
「ulタグ」に「menu__child」というクラスを付けておきます。このクラスはCSSで非表示にしておきます。

CSS(アコーディオンメニュー)

「li」のマークを削除して「menu__child」クラスを非表示にします。

スクリプト(アコーディオンメニュー)

[ 2〜4行目 ]
「menu」クラスがクリックされた時の処理を記述します。
3行目でCSSで「none」にしていたクラスを表示させています。
表示にはjQueryの「slideToggle」という関数を利用しており、これは「表示されていなければ表示、表示されていれば非表示する」という特徴を持つ便利な関数です。

以上、アコーディオンメニューは簡単に実装できます。
適用するデザインが複雑な場合はプラグインでは無く、自分で作成するのも手段の1つとして考えても良いかと思います。

サンプルのリンクも載せておきますね。

-jQuery

執筆者:

関連記事

jQuery ローカルストレージ で入力値の保存と読み込みをする

ブラウザごとに値を保存しておくことができるローカルストレージについて学びたいと思います。 ブラウザの機能として提供されているものなので、特別なものは不要です。 クッキーとは少し違い、保存の有効期限など …

jQuery CSSクラスの追加と削除

jQueryを使うとHTMLやCSSだけでは実現できないような動きをサイトに付けることができます。 今回は例としてボタンクリックされた時に「CSSのクラスを追加」もう一度クリックすると「CSSクラスを …

jQuery 選択した画像への差し替え

jQueryは一番有名なJavaScriptのライブラリです。 jQueryのおかげで簡単にJavaScriptを利用できるようになりましたね。 他のライブラリも多く出てきましたが、まだまだ使う機会も …

jQuery テキストボックスのフォーカス時にテキストを全選択

サイトのUI(ユーザーインターフェイス)向上のためにテキストボックスがフォーカスされた時に、テキストボックスの内容を選択済みにして内容を変更しやすくしたい場合があります。 バックスペースで1文字ずつ削 …

jQuery 文字の大きさ(フォントサイズ)の変更(小中大)

jQueryで文字サイズの大きさを変更するボタンを作ってみようと思います。 行政のサイトで良く見かけますよね。 これもjQueryで簡単に実現できます。 昔からある機能なので古いイメージがありますが、 …


comment

メールアドレスが公開されることはありません。