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