jQuery Cookie アコーディオンメニュー 開閉状態を保持
アコーディオン(開閉式)メニューを生成し、クッキーで開閉状態を記憶
jquery.cookie.jsを使用。
jQuery
$(function () {
for (var i = 1; i <= $('ul').length; i++) {
// クッキーがblockであれば読み込み時にメニューをオープンする
if ($.cookie('child' + i) == 'block') {
$('#child' + i).show();
}
}
$('span').click(function() {
var child = $(this).next('ul');
// メニュー表示/非表示
$(child).slideToggle('fast', function() {
// 有効期限は1日（クッキーにはドメインをセットしない、ブラウザを閉じたら初期化）
$.cookie($(child).attr('id'), $(child).css('display'), { expires: 1 });
});
});
});
通常版はjQuery アコーディオンメニューを参照。
CSS
ul {
display: none;
}
span {
cursor: pointer;
}
HTML
<span>メニュー 1</span>
<ul id="child1">
<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 id="child2">
<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 id="child3">
<li><a href="#">メニュー 3-1</a></li>
<li><a href="#">メニュー 3-2</a></li>
<li><a href="#">メニュー 3-3</a></li>
</ul>
サンプル
