クルーデザイン

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を利用すれば、絞り込み検索機能も簡単に作成できます。 絞り込み検索機能とは、テキストボックスに入力した値とマッチするものを表示・マッチしないものを非表示にするような機能です。 以下のような …

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

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

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

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

jQuery CSSクラスの追加と削除

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

jQuery ページの最上部へスクロールする処理(サンプル付き)

よく見かける「トップへ戻る」を作ってみます。 ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。 それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロ …


comment

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