jQuery 多階層アコーディオンメニュー

多階層のアコーディオン(開閉式)メニューを生成

jQuery

$(function () { // 親メニュー処理 $('span').click(function() { // メニュー表示/非表示 $(this).next('ul').slideToggle('fast'); }); // 子メニュー処理 $('li').click(function(e) { // メニュー表示/非表示 $(this).children('ul').slideToggle('fast'); e.stopPropagation(); }); });

CSS

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

HTML

<span>メニュー 1</span> <ul> <li>メニュー 1-1 <ul> <li>メニュー 1-1-1 <ul> <li><a href="#">メニュー 1-1-1-1</a></li> <li><a href="#">メニュー 1-1-1-2</a></li> <li><a href="#">メニュー 1-1-1-3</a></li> </ul> </li> <li>メニュー 1-1-2 <ul> <li><a href="#">メニュー 1-1-2-1</a></li> <li><a href="#">メニュー 1-1-2-2</a></li> <li><a href="#">メニュー 1-1-2-2</a></li> </ul> </li> </ul> </li> <li>メニュー 1-2 <ul> <li>メニュー 1-2-1 <ul> <li><a href="#">メニュー 1-2-1-1</a></li> <li><a href="#">メニュー 1-2-1-2</a></li> <li><a href="#">メニュー 1-2-1-3</a></li> </ul> </li> <li>メニュー 1-2-2 <ul> <li><a href="#">メニュー 1-2-2-1</a></li> <li><a href="#">メニュー 1-2-2-2</a></li> <li><a href="#">メニュー 1-2-2-2</a></li> </ul> </li> </ul> </li> <li>メニュー 1-3 <ul> <li>メニュー 1-3-1 <ul> <li><a href="#">メニュー 1-3-1-1</a></li> <li><a href="#">メニュー 1-3-1-2</a></li> <li><a href="#">メニュー 1-3-1-3</a></li> </ul> </li> <li>メニュー 1-3-2 <ul> <li><a href="#">メニュー 1-3-2-1</a></li> <li><a href="#">メニュー 1-3-2-2</a></li> <li><a href="#">メニュー 1-3-2-2</a></li> </ul> </li> </ul> </li> </ul> <span>メニュー 2</span> <ul> <li>メニュー 2-1 <ul> <li><a href="#">メニュー 2-1-1</a></li> <li><a href="#">メニュー 2-1-2</a></li> <li><a href="#">メニュー 2-1-3</a></li> </ul> </li> <li>メニュー 2-2 <ul> <li><a href="#">メニュー 2-2-1</a></li> <li><a href="#">メニュー 2-2-2</a></li> <li><a href="#">メニュー 2-2-3</a></li> </ul> </li> <li>メニュー 2-3 <ul> <li><a href="#">メニュー 2-3-1</a></li> <li><a href="#">メニュー 2-3-2</a></li> <li><a href="#">メニュー 2-3-3</a></li> </ul> </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で遊んでいます。
※動作確認について