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

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

言わずもがな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

アコーディオン

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

要はアコーディオンのトリガーと中身があればいいので、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

親トリガー

• 子トリガー

  • 孫トリガー

    • 中身

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