JavaScript プログラミング

【jQuery初心者】たったの2行でアコーディオンメニューを実装する方法

2020年11月25日

 

こんにちは、イケゾーです。

イケゾー
今回は、jQueryを使ったアコーディオンメニューの実装方法を紹介するよ

 

ページ内に多くの情報をコンパクトに表示するための「アコーディオンメニュー」ですが、ほとんどのサイトで採用されております。ユーザにとって必要/不要な情報がありますので、初期状態では非表示にしておき、クリックした時に表示するといったメニューになります。

ユーザを上手にページ内を誘導できるので、設置しておいた方が良いですね。ページ内で、ユーザの求める情報を少ないスクロールやクリックでアクセスできるように配置できるよう使えると良いでしょう。

 

HTML/CSSだけを触っただけの方にとって、jQueryのこういった動きのあるモノってハードル高く感じます。僕もそうでした。しかし、仕組みを理解してから取り組んでみると、意外と大したことはありません。なので当記事では、コードを掲載するだけでなく文章で噛み砕き、超初心者向けに丁寧に解説していきます。

コードはそのまま仕事に応用できる財産になりますので、ぜひ手を動かしてPC上で動かしてみてください。

この記事はこんな人におすすめ!

  • jQuery初心者(どうやって使うの?なにができるの?)
  • jQueryってなんだか難しそうって思っている
  • jQueryで簡単なアコーディオンメニューの実装をしたい
  • jQueryの「add/remove/hasClass, slideUp/Down」の使い方を知りたい

 

タブメニューにも挑戦しよう
【jQuery初心者】たったの5行でタブメニューを実装する方法

続きを見る

スライドショーにも挑戦しよう
【jQuery初心者】簡単なスライドの作り方|アニメーションサンプル有り

続きを見る

スムーススクロールにも挑戦しよう
【jQuery初心者】ページ内リンクでスムーススクロールを実装する方法

続きを見る

 

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

 

【jQuery初心者】たったの2行でアコーディオンメニューを実装する方法

このような流れで実装していきますね。

 

完成物の確認

記事のトップに動画で載せましたが、実装していく内容はこちらです。

  • アコーディオン
    「menu-item」をクリックすると、「sum-menu-item」が表示されます。
  • デザイン
    右端のアイコン[+][-]表示を切り替えて、メニューの開閉状態をわかりやすくします。

 

注意点ですが、基本的なHTML,CSSは出来ていて、jQueryが使える状態であることを前提に進めいてきます。不安な方はこちらの記事で確認してから始めましょう。

HTML/CSSの基本
初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

続きを見る

 

HTMLとCSSの準備

jQuery導入に必須です。こちらで最新版を確認してください。つまずく事も多いので、心配な方は念のためチェックしてください!

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

 

コピペ用完成ソースコード

See the Pen
jOMOZMj
by いけぞー@WEB始めたて先生 (@ikezoooblog)
on CodePen.

jQueryの解説

では、jQueryを書いていきます。まずは大切な仕組みの理解をしましょう。

  1. 親メニューを「menu-item」、子メニューを「sub-menu-item」とし、「.show」の付け替えで表示/非表示を切り替えます。
  2. まず、親メニュー「menu-item」がクリックされたら、その子メニュー「sub-menu-item」を取得します。
  3. 取得した「sub-menu-item」「.open」がついているか(すでにアコーディオンが開いているか)if文を使ってそれぞれ処理をします。
    1. アコーディオンが開いている「.open」がついている場合、「.open」を外しslideUpで非表示にして、[-]を[+]に変更する。
    2. アコーディオンが閉じている「.open」がついてない場合、「.open」をつけてslideDownで表示にして、[+]を[-]に変更する

コードを文章にて解説していますので、文章を読みながらコードを見てください。
何回か見ていると、コードが読めるようになってきます。

 

jQuery

$(function(){
	// 親メニューがクリックされたら
	$('.menu-item').click(function(){
		// クリックされた親メニューの子要素(サブメニュー)を取得
		var $subMenu = $(this).find('.sub-menu');
		// サブメニューに「.open」があれば
		if($subMenu.hasClass('open')){
			// サブメニューから「.open」を外して、非表示にする
			$subMenu.removeClass('open');
			$subMenu.slideUp();
			$(this).find('span').text('+');
		// サブメニューに「.open」がなければ
		}else{
			// サブメニューに「.open」をつけて、表示する
			$subMenu.addClass('open');
			$subMenu.slideDown();
			$(this).find('span').text('-');
		}
	});
});

 

jQueryをもっと簡潔に「2行で」

もっとシンプルに書いてみましょう。slideToggleを使うと超シンプルにかけますよ。

$(function(){
	$('.menu-item').each(function(){
		$(this).on('click',function(){
			$(this).find('.sub-menu').slideToggle();
			return false;
		});
	});
});

 

まとめ

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-JavaScript, プログラミング
-, , , ,

© 2021 IkezoooBlog