2017.03.27
脱jQuery初心者！コピペに頼らないプログラミング入門講座～その4 アコーディオンを作ってみよう～
こんにちは。三浦です。
もう３月も終わりだというのに気温が安定しませんね。
それなのに花粉ばかり舞いに舞っているのが非常に恨めしいです。
早いところ暖かくなって花見なんてしたいものですね。
さて、今回も引き続きjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。
対象としている人は、
「jQueryのプラグインは利用しているけど自分では書けない」
「HTML、CSSでコーディングはできるけどjQueryも使えるようになりたい」
そんな方です。
↓前回までの講座はこちらから
今回は４週目ということで今までの簡単なまとめとして「アコーディオン」を作っていきたいと思います。
アコーディオンって何？
アコーディオンとは、クリックによって伸縮して開閉するコンテンツです。
まさに楽器のアコーディオンみたいなUI表現です。
コンテンツの高さを抑えることができるのでよく見かけると思います。
今回使用するもの
クリックイベント…
.on('click',function(){}
指定した要素をクリックした時に呼び出されるイベントを設定できます。
第1回の講座でご紹介したイベントです。
removeClass
.removeClass()
要素に付与されているclassから任意のものを削除できるメソッド。
第2回の講座でご紹介したメソッドです。
addClass
.addClass()
要素に任意のclassを付与できるメソッド。
第2回の講座でご紹介したメソッドです。
hasClass…
.hasClass()
指定された要素が特定のクラスを持っているかを判断するメソッドになります。
第3回の講座でご紹介したメソッドです。
では早速サンプルを見てみましょう。
アコーディオンのサンプル
- RESULT
- HTML
- CSS
- JS
-
-
ここをクリック
- テキストがでてきます
-
-
コピー
<dl class="aco close"> <dt> <div class="aco_icon"><span></span><span></span></div> <p>ここをクリック</dt> <dd>テキストがでてきます</dd> </dl> -
コピー
.aco { width: 100%; } .aco dt { background: #00008C; color: #fff; padding: 10px 15px; cursor: pointer; position: relative; } .aco dd { display: none; padding: 10px 15px; border: 1px solid #00008C; } /* アイコン */ .aco_icon { position: absolute; width: 20px; height: 50%; right: 10px; } .aco_icon span { position: absolute; width: 20px; height:2px; background-color: #fff; border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .aco_icon span:nth-last-of-type(1) { top: 50%; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } .aco_icon span:nth-last-of-type(2) { top: 50%; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .aco.open .aco_icon span:nth-of-type(1) { top: 50%; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .aco.open .aco_icon span:nth-of-type(2) { top: 50%; transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } -
コピー
$(function(){ $('.aco dt').on('click',function(){ if($(this).parent('.aco').hasClass('close')){ $(this).parent('.aco').removeClass('close').addClass('open'); $(this).siblings('.aco dd').slideDown(500); } else if($(this).parent().hasClass('open')){ $(this).parent('.aco').removeClass('open').addClass('close'); $(this).siblings('.aco dd').slideUp(500); } }); });
新しく出てきたメソッドについて
parent
.parent()
指定された要素の親要素を全て返すメソッドです。
今回の場合は$(‘.aco dt’)の中のクリックされた要素$(this)の親要素
- を指定することになります。
siblings
.siblings('.aco dd')
指定された要素の兄弟要素を全て返すメソッドです。
今回の場合は引数で(.aco dd’)を指定しているので、兄弟要素の中から(.aco dd’)を指定することになります。
slideDown
.slideDown(500);
指定された要素の高さを操作して隠されていた要素を表示するメソッドです。
slideUpとセットで使用されることが多いです。
引数を指定することによってアニメーションの時間を変更することもできます。
slideUp
.slideUp(500);
指定された要素の高さを操作して要素を非表示にするメソッドです。
slideDownとセットで使用されることが多いです。
引数を指定することによってアニメーションの時間を変更することもできます。
サンプルについての解説
$('.aco dt').on('click',function(){
$(“.aco dt”)がクリックされた時に
↓ここからアコーディオンが閉じていた場合の動きです。
if(
もし
$(this).parent('.aco')
$(‘.aco dt’)の中でクリックされた要素$(this)の親要素(‘.aco’)で
.hasClass('close')
クラス「close」を持つ要素があれば
$(this).parent('.aco')
$(‘.aco dt’)の中でクリックされた要素$(this)の親要素(‘.aco’)から
.removeClass('close').addClass('open');
クラス(‘close’)を削除。そしてクラス(‘open’)を追加。
$(this).siblings('.aco dd')
$(‘.aco dt’)の中でクリックされた要素$(this)の兄弟要素(‘.aco dd’)を
.slideDown(500);
0.5秒かけてスライドダウンして表示。
↓ここからはアコーディオンが開いていた場合の動きです。
else if(
もし
$(this).parent('.aco')
$(‘.aco dt’)の中でクリックされた要素$(this)の親要素(‘.aco’)で
.hasClass('open')
クラス「open」を持つ要素があれば
$(this).parent(.aco)
$(‘.aco dt’)の中でクリックされた要素$(this)の親要素(‘.aco’)から
.removeClass('open').addClass('close');
クラス(‘open’)を削除。そしてクラス(‘close’)を追加。
$(this).siblings('.aco dd')
$(‘.aco dt’)の中でクリックされた要素$(this)の兄弟要素(‘.aco dd’)を
.slideUp(500);
0.5秒かけてスライドアップして非表示。
という処理になっています。
まとめ
クラスacoに付帯しているクラスopen、closeで判断してコンテンツの開閉を行うようになっています。
今までに比べて少し複雑に見える記述になっていますが、
ひとつひとつ考えていくととても簡単な構造になっています。
このように様々なメソッド等を駆使することで様々な仕掛けを作ることができます。
この講座を足掛けに皆様のjQueryへの理解が深まれば幸いです。三浦でした。
