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>
サンプル
