ページ遷移時にアコーディオンメニューの開閉状態を保持する

宜しくお願いします。

下記に参考にしたURLを記します。
http://html-five.jp/364/
http://html-five.jp/demo/010/

２つ目にある参考サイトの中で教えて頂きたいのですが、現状はLIST1とLIST2を開いた状態でLIST1-2をクリックするとページの状態が変わらない状態になります。実現したいことはLIST1-2をクリックするとそれ以外のLISTを閉じたいのです。今回の例ではLIST2を閉じてLIST1-2が所属しているLIST1は開いたままにしたいのです。宜しくお願いします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2015/08/31 13:57

こんにちは。

2段目のリストはリンクに設定されているようですので、スクリプトで他を閉じても、リンクの結果ページ遷移してしまいますが・・・？
それとも、リンク先のページにも同じアコーディオンメニューを設置していて、そちらに結果を反映したいということなのかな。

ひとつの解決法としては、開/閉が排他的に行われる（開いているのは一つだけ）ようにするというのが考えられます。
動作自体は現状のままでよくて、リンクをクリックした時だけ他を閉じたいというのであれば、そのような処理だけを付け加えるという考えもあります。
ご質問は、多分、後者であると思いますので・・・

言葉の通り、他のリストを閉じるというイベントを付け加えれば良いのですが、もとのスクリプトが「閉じる」という動作を明示しておらずみなtoggleで処理をしていますので、「開いているものをクリックする」という処理にするほうが簡単かな。
開いているものには"open"のクラスを付与するようになっているらしいので、それが利用できそうなのですが、何だかおかしいですね。
クッキーから読み込んで開いた時にはクラス設定をしておらず、その後はtoggleで処理してしまっているので、クラス設定がすっと逆転したままになってしまうものができてしまうようで、残念ながら利用できそうもないですね。

というわけで、開閉状態も自前で判断することにして、以下を追加すれば、一応ご質問のような動作になると思います。
（インデントは全角スペースにしてあります）
$(".accordion ul a").click(function(){
　var lis = $(".accordion>li");
　var idx = lis.index($(this).parent().parents("li:first"));
　lis.each(function(i){
　　if(i != idx && $(this).children("ul:visible").length) $(this).children("p").click();
　});
});

付けたしなので必ずしも効率的ではありませんし、クラス設定のこともあるので、全体を整理し直した方が適切なコードになると思います。

この回答へのお礼

fujillin様

ご回答頂きましてどうもありがとうございます。

また、こちらの質問が誤解を招く表現がありましたが、正しく意図を解釈して頂きまして感謝致します。

ご教示頂いた方法で無事に解決致しました。
しっかりと学習致します。

また、機会がございましたらどうぞ宜しくお願い致します。

お礼日時：2015/09/01 11:28