アコーディオンメニューの開閉制御

私webデザイナーをしています。

アコーディオンメニューで（開くのは１つのパネルのみ）ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。
しかし、下記のコードでどうしても実装できません。

技術のある方、間違いを教えていただけないでしょうか？

【ｈｔｍｌ】
<dl class="accordion_dl">
<dt>アコーディオンメニュー.1</dt>
<dd>アコーディオンメニュー.1のテキスト表示</dd>
<dt>アコーディオンメニュー.2</dt>
<dd>アコーディオンメニュー.2のテキスト表示</dd>
<dt>アコーディオンメニュー.3</dt>
<dd>アコーディオンメニュー.3のテキスト表示</dd>
<dt>アコーディオンメニュー.4</dt>
<dd>
<ul>
<li>リスト挿入</li>
<li>リスト挿入</li>
<li>リスト挿入</li>
<li>リスト挿入</li>
</ul>
</dd>
</dl>

【JS】
jQueryとjquery.cookie.jsを読み込んでいます。

for (var i=0; i < $(".accordion_dl dt").length; i++) {
if( $.cookie("accord" + i) == "open" ) {
$(".accordion_dl dt").eq(i).next("dd").show();
}
}


$('.accordion_dl dt').click(function(){
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
n = $(".accordion_dl dt").index(this);
if ($.cookie("accord" + n) == "open") { $.cookie("accord"+n,"close", {path:"/"}); }
else { $.cookie("accord"+n,"open", {path:"/"}); }
});

よろしくお願いいたします。

No.2 回答者： fujillin 回答日時： 2014/10/01 12:59

こんにちは。

＞しかし、下記のコードでどうしても実装できません。
どううまくいかないのか書いてないのでわかりませんが・・・
ざっと見たところ、動作しないわけではなくて開閉状態が思った状態と違ってしまうということでしょうか？


仕組みはご承知のように、メニューの開閉状態をクッキーに保存して、遷移後のページでそれを読み込んで再現しようとしているわけですが、そのあたりが怪しいと思われます。
デバッグのために、都度クッキーの内容を表示させてみるか、あるいはスクリプトの動作を簡単にシミュレートしてみればおわかりになると思います。


＞開くのは１つのパネルのみ
という仕様とのことですが、ご提示のスクリプトでは全部の開閉状態を記録しようとしているのではないかと推測します。（多分これがうまくいっていません）

別案として。開いているメニューの位置だけを記憶しておくという方法も考えられます。
（インデックス番号などを記憶しておく＝記憶項目はひとつだけ）
想像するところでは、こちらの考え方の方が見落としが起きにくいので、勘違いや間違いの入り込む可能性が減るのではないかと思います。

No.1 回答者： ORUKA1951 回答日時： 2014/09/27 19:01

そんなのjavascript使いませんけど・・

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/357 … )］より

　単純に、スタイルシートでアコーディオンを作成して、カテゴリーではcurrentなリストのみ開いておくほうが良いです。
<div class="nav"><!-- class名は文書構造を保管するもの -->
　<ol>
　　<li>トップ</li>
　　<li>あ行
　　　<ol>
　　　　<li>あ</li>
　　　　<li>い</li>
　　　　<li>う</li>
　　　</ol>
　　</li>
　　<li class="current">か行
　　　<ol>
　　　　<li>か</li>
　　　　<li>き</li>
　　　　<li>く</li>
　　　</ol>
　　</li>
※DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　デザインするときは、HTMLは文書構造だけ、デザインはスタイルシートと役割分担--構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )しないと、あとで苦労します。

　javascript使って、URLからcurrentを判断させても良いでしょう。