jQueryで２段式アコーディオンメニュー

質問

いつも参考にさせて頂いております。
あるサイト様（http://triplexxx.jp/archives/150）を参考にjQueryで２段式のアコーディオンメニューを作成していましたが、何分初心者なもので早々に行き詰まってしまいました。
理想はこちらのサイト様（http://html-five.jp/pc/demo/002/）にあるデモの下側、『２段アコーディオン』をこちら（http://html-five.jp/demo/002/index2.html）の『ポンプ型アコーディオン』ような動きにしたいと思っております。
スクリプト自体を入れ子にしたりしてみましたが根本的な部分がダメなようでうまくいきませんでした。
何卒ご教授いただけますようお願いします。

[参考にしたjQuery（１段までは問題なく動きます）]
script type="text/javascript">
var j$ = jQuery;
j$(function(){
j$(".ac_parent").each(function(){
j$("li > a").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);
return false;
});
});
});
});
</script>

[作成中のHTML]
<div>
<ul class="ac_parent">
<li><a href="#">1</a>
<ul class="ac_child">
<li><a href="#">11</a></li>
<ul class="ac_gchild">
<li><a href="#">111</a></li>
<li><a href="#">112</a></li>
<li><a href="#">113</a></li>
</ul>
<li><a href="#">12</a></li>
<ul class="ac_gchild">
<li><a href="#">121</a></li>
<li><a href="#">122</a></li>
<li><a href="#">123</a></li>
</ul>
</ul>
</li>
<li><a href="#">2</a>
<ul class="ac_child">
<li><a href="#">21</a></li>
<ul class="ac_gchild">
<li><a href="#">211</a></li>
<li><a href="#">212</a></li>
<li><a href="#">213</a></li>
</ul>
<li><a href="#">22</a></li>
<ul class="ac_gchild">
<li><a href="#">221</a></li>
<li><a href="#">222</a></li>
<li><a href="#">223</a></li>
</ul>
</ul>
</li>
<li><a href="#">3</a>
<ul class="ac_child">
<li><a href="#">31</a></li>
<ul class="ac_gchild">
<li><a href="#">311</a></li>
<li><a href="#">312</a></li>
<li><a href="#">313</a></li>
</ul>
<li><a href="#">32</a></li>
<ul class="ac_gchild">
<li><a href="#">321</a></li>
<li><a href="#">322</a></li>
<li><a href="#">323</a></li>
</ul>
</ul>
</li>
</ul>
</div>

回答No.2

fujillin · ベストアンサー

ANo1です。

ＨＴＭＬの構造が明確になりました。補足に記載の構造であれば一段目と二段目は同じ構造になっているはずですので、リンク要素をクリックしたらその次の兄弟要素のulの開閉をトグルで行なうように記述すれば、親用、子用とスクリプトを分ける必要は無いように思います。

以下は上記の説明とは逆の方法で設定していますが、こんな感じでは？
（ul側から見て、前の兄弟要素のクリックにイベントを設定していますが、結果的には同じことです。これだとulが無いリンク要素にまでイベントを設定しなくてすみます。）

（全角空白は半角に）
$(function(){
　$("ul", $("ul.ac_parent")).each(function(){
　　var $ul = $(this).hide();
　　$(this).prev("a").click(function(){
　　　$ul.slideToggle("fast");
　　　return false;
　　});
　});
});

お礼

fujillin様

この度は本当にありがとうございました。
実のところSQLやVBAを趣味程度ですが触っているものの、HTMLやCSS、JavaScriptは数日前に始めたばかりで何がなんだかさっぱりの状態でしたが、fujillinさんのアドバイスで希望通りの動作までもっていけたことに加え、おもしろさを色々と感じることができました。
まだまだ素人レベルですが頑張っていく元気が沸きました！
また質問することもあるかと思いますが、お手隙の際には相手して頂ければと思います。
本当にありがとうございました。

補足

fujillin様

何度もありがとうございます！
頂いたコードを元に、『アニメーションの追加』と『クリックイベント時に既に開いているメニューを閉じる』処理を試行錯誤しながら自分なりに組み込み、ようやく希望の動作にもっていくことができました！（こんな時間になってしまいましたが・・・笑）

[最終のコード]
<script type="text/javascript">
$(function(){
　$("ul", $("ul.ac_parent")).each(function(){
　　var $ul = $(this).hide();
　　$(this).prev("a").click(function(){
　　　var params = {height:"toggle", opacity:"toggle"};
　　　$(this).next().animate(params).parent().siblings()
　　　　.children("ul:visible").animate(params).siblings();
　　　return false;
　　});
　});
});
</script>

これが良い書き方なのかどうか、実用性があるのかどうかはともかくとして後に参考になるかもしれませんので補足として最終形のコードを記載させて頂きます。

回答No.1

fujillin

スクリプトをいろいろ試す前に、マークアップを調整したほうがよろしいかと。
ulの直下にul要素があるみたいですし。

補足

fujillin様
ご指摘ありがとうございます！
きちんとした入れ子になっていなかったようです・・・
ul、liを入れ子にして良いのかどうか知らないのですが一応修正してみました。

[修正後のHTML]
<div>
<ul class="ac_parent">
<li><a href="">1</a>
<ul class="ac_child">
<li><a href="">11</a>
<ul class="ac_gchild">
<li><a href="">111</a></li>
<li><a href="">112</a></li>
<li><a href="">113</a></li>
</ul>
</li>
<li><a href="#">12</a>
<ul class="ac_gchild">
<li><a href="">121</a></li>
<li><a href="">122</a></li>
<li><a href="">123</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

この状態で親用と子用のスクリプトを並べて書いておくと孫もスライドするようになりました！
が、孫のみ開いてもすぐに閉じてしまいます・・・
スクリプトも入れ子にしておかなければダメなのでしょうか。
お手を煩わせますが今一度アドバイス頂ければ非常に助かります。
よろしくお願いします。

[親用のスクリプト]
<script type="text/javascript">
var j$ = jQuery;
j$(function(){
j$(".ac_parent").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);
return false;
});
});
});
});
</script>

[子用のスクリプト]
<script type="text/javascript">
var j$ = jQuery;
j$(function(){
j$(".ac_child").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);
return false;
});
});
});
});
</script>