2016.02.19
WEB制作
[WEB] アコーディオンの今
マイクロソフトが実質IE最新以外のサポートを終了したことによって、Javascript,CSS,HTMLの書き方が大きく変わりつつあります。
そこで今回は最新ブラウザのみをサポートする場合の、アコーディオン表示方法を考えたいと思います。
日本語が苦手なのでソース書きます。
HTML(JADE)
1 2 3 4 |
.accordion .accordion_trg アコーディオンを開閉 .content ほげほげ .accordion_trg ここにも開閉ボタン付ける |
Javascript(coffee script)
1 2 3 4 5 6 7 8 9 10 11 12 |
$ -> # 面倒なのでここはjQuery $('.accordion').each -> new Accordion(@) class Accordion constructor: (@ele) -> # .accordion_trg全てがトリガーになるように arr = @ele.getElementsByClassName 'accordion_trg' for e in arr e.addEventListener 'click', @click , false click:=> @ele.classList.toggle "open" |
これで、.accordion_trgの「アコーディオンを開閉」をクリックする度に.accordion要素のクラスに.openが付いたり消えたりします。
IE最新だけを考えるので、addEventListenr やclassListが使い放題!
(汎用性を持たせる為に、一応クラス内はjQuery無しで書いてます。)
あとはスタイルシートをゴニョゴニョすれば完了です。
CSS(SASS)
1 2 3 4 5 6 |
.accordion .content display: none &.open .content display: block |
ソースがすっきり!
コメントを残す