[jQuery]スマホ対応アコーディオンの作り方

Reading Time: < 1 minute

色々見て回ってようやく分かってきた

言わずもがなjQueryは別途読ませること。
環境としてはとりあえず、1.7.1で動いた。

javascript

[js]
$(function () {
$(‘h2’).click(function() {
$(this).next(‘ul’).slideToggle(‘fast’);
$(this).toggleClass(“open”);
});
});
[/js]

  • h2→アコーディオンのトリガーになるところ
  • ul→アコーディオンにしたいところ
  • open→アコーディオンが開いた時に付与するclass名

開閉時のアイコンは要らないよってんなら、4行目はなくてもいい。
ちなみに
[js]
$(this).children(“span”).toggleClass(“open”);
[/js]
ってやると、「h2の中にあるspanに.openをつける」ってことになる。

html

[html]

アコーディオン

  • 中身
  • 中身
  • 中身
  • 中身

[/html]
要はアコーディオンのトリガーと中身があればいいので、h2とかulにしなくても大丈夫。
実際に使うときはclassとかidを振っとかないと他と喧嘩するだろうから注意。

css

[css]
/* トリガー */
h2:before{/* 閉じてる時 */
content:”+”;
}
h2.open:before{/* 開いてる時 */
content:”-“;
}

/* アコーディオン */
ul{
display:none;
}
[/css]
h2は開閉でビジュアル差別化したい時の例。
アコーディオンの初期値を非表示にしたいときはdisplay:none;を入れておく。

【応用】多階層にする

クラスなりで割り振れば多階層を作ることができる。

javascript

[js]
$(function () {

// 親
$(‘h2’).click(function() {
$(this).next(‘ul.parent’).slideToggle(‘fast’);
$(this).toggleClass(“open”);
});

// 子
$(‘h3’).click(function(e) {
$(this).next(‘ul.child’).slideToggle(‘fast’);
$(this).toggleClass(“open”);
e.stopPropagation();
});

// 孫
$(‘h4’).click(function(e) {
$(this).next(‘ul.grandson’).slideToggle(‘fast’);
$(this).toggleClass(“open”);
e.stopPropagation();
});

});
[/js]

html

[html]

親トリガー

  • 子トリガー

    • 孫トリガー

      • 中身

[/html]

cssは別段凝ったことしないので割愛。

シェアする

  • このエントリーをはてなブックマークに追加

コメント

  1. […] 前の記事に比べてスマートなのができた これは嬉しい […]