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

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

こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして
（http://triplexxx.jp/archives/150）
アコーディオンメニューを設置しました。

ページ遷移後でも、常に一番目のメニューが開いている状態なので、
選択しているページのメニューだけを開いている状態にしたいのですが
どの部分を変更したらよいでしょうか？

javascriptの
if(index > 0) $this.next().hide();
の部分が開閉の指示をしている箇所かなと思うのですが
新しいコードを書ける知識がないので、教えてください。
よろしくお願いします。

html
----------------------
<ul class="acc">
<li><a href="1">category1</a>
<ul class="fxmn">
<li><a href="11">menu 1-1</a></li>
<li><a href="12">menu 1-2</a></li>
<li><a href="13">menu 1-3</a></li>
</ul>
</li>
<li><a href="2">category2</a>
<ul class="fxmn">
<li><a href="21">menu 2-1</a></li>
<li><a href="22">menu 2-2</a></li>
<li><a href="23">menu 2-3</a></li>
<li><a href="24">menu 2-4</a></li>
</ul>
</li>
<li><a href="3">category3</a>
<ul class="fxmn">
<li><a href="31">menu 3-1</a></li>
<li><a href="32">menu 3-2</a></li>
<li><a href="33">menu 3-3</a></li>
<li><a href="34">menu 3-4</a></li>
<li><a href="35">menu 3-5</a></li>
</ul>
</li>
</ul>
----------------------

css
----------------------
ul.acc, ul.acc li ul {
margin: 0;
padding: 0;
list-style: none;
}

ul.acc a{
display: block;
height: 30px;
line-height: 30px;
color: #feffff;
}

ul.acc {
background-color: #185AAC;
}

ul.acc li ul {
background-color: #A6B5E2;
}
----------------------

javascript
----------------------
var j$ = jQuery;

j$(function(){
j$(".acc").each(function(){
j$("li > a", this).each(function(index){
var $this = j$(this);

if(index > 0) $this.next().hide();

$this.click(function(){
var params = {height:"toggle", opacity:"toggle"};
j$(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params);
});
});
});
});
----------------------

No.1 ベストアンサー 回答者： fujillin 回答日時： 2010/06/22 13:04

未検証ですが…

n番目のカテゴリだけ開いておきたいのであれば、当該部分を
　if (index != n) $this.next().hide();
などとしておけば、初期状態はn番目（0スタート）だけが開いたものとなります。

ただし、ページ遷移時にこれが実行できるようにnを受け渡してあげなければなりません。
その方法として
　1）呼び出されたページ側にnを記載しておく（フレームなどを使用していない条件）
　2）リンク時にロケーション・ハッシュ（/ccc.htmlI#XYZ の#XYZの部分）を利用して受け渡す
　3）クッキーを利用して受け渡す。
などが考えられますが、1）が一番簡単かと思われます。

この回答へのお礼

ありがとうございます。

とりあえず、

　if (index != n) $this.next().hide();

で、n の部分を変えた .js をメニューの数だけ作成して
ページごとに使用する .js を変えるという方法にしました。

もっとスマートに分岐させる方法もあるのかと思います。
詳しく教えていただけると嬉しいです。

お礼日時：2010/06/24 21:21