jQuery アコーディオンメニュー

jQueryでアコーディオン(開閉式)メニューを生成

jQuery

$(function () { // デフォルトで1番目を開く // $('ul').eq(0).show(); $('span').click(function() { // メニュー表示/非表示 $(this).next('ul').slideToggle('fast'); }); });

CSS

ul { display: none; } span { cursor: pointer; }

HTML

<span>メニュー 1</span> <ul> <li><a href="#">メニュー 1-1</a></li> <li><a href="#">メニュー 1-2</a></li> <li><a href="#">メニュー 1-3</a></li> </ul> <span>メニュー 2</span> <ul> <li><a href="#">メニュー 2-1</a></li> <li><a href="#">メニュー 2-2</a></li> <li><a href="#">メニュー 2-3</a></li> </ul> <span>メニュー 3</span> <ul> <li><a href="#">メニュー 3-1</a></li> <li><a href="#">メニュー 3-2</a></li> <li><a href="#">メニュー 3-3</a></li> </ul>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。