スマホで使えるjQuery アコーディオンメニュー
スマートフォンで活用大のアコーディオンメニュー。
jqueryなら実装がカンタン。
dlパターン
htmlはこんな感じ
<section id="demo1"> <dl> <dt>アコーディオン1</dt> <dd>アコーディオン1の中身</dd> <dt>アコーディオン2</dt> <dd>アコーディオン2の中身</dd> <dt>アコーディオン3</dt> <dd>アコーディオン3の中身</dd> <dt>アコーディオン4</dt> <dd>アコーディオン<br> アコーディオン<br>アコーディオン <br>アコーディオン<br>アコーディオン</dd> </dl> </section>
javascriptは
$(function(){ $("#demo1 dt").on("click", function(){ $(this).next().slideToggle(); $(this).toggleClass("active"); }); });
css
#demo1 dl { border-bottom: 1px solid #ddd; } #demo1 dt { display: block; padding: .6em 1em; border: 1px solid #ddd; border-bottom: none; cursor: pointer; } #demo1 dt:after { display: inline-block; float: right; font-family: 'Genericons'; content: 'f431'; text-align: right; } #demo1 dt.active:after { font-family: 'Genericons'; content: 'f432'; } #demo1 dd { display: none; padding: .3em 1em; background: #efefef; border: 1px solid #ddd; border-top: none; }
ulを使うパターン
<section id="demo2"> <ul class="acdMenu"> <li> <div>アコーディオン1<span></span></div> <ul> <li><a href="#">アコーディオン1の子1</a></li> <li><a href="#">アコーディオン1の子2</a></li> <li><a href="#">アコーディオン1の子3</a></li> </ul> </li> <li> <div>アコーディオン2<span></span></div> <ul> <li><a href="#">アコーディオン2の子1</a></li> <li><a href="#">アコーディオン2の子2</a></li> <li><a href="#">アコーディオン2の子3</a></li> </ul> </li> <li> <div>アコーディオン3<span></span></div> <ul> <li><a href="#">アコーディオン3の子1</a></li> <li><a href="#">アコーディオン3の子2</a></li> <li><a href="#">アコーディオン3の子3</a></li> </ul> </li> <li><a href="#">アコーディオン4</a></li> <li><a href="#">アコーディオン5</a></li> </ul> </section>
$("#demo2 div").click(function(){ $(this).next("ul").slideToggle(); $(this).toggleClass("active"); });