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>

サンプル

最新の記事

プロフィール

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