アコーディオンパネルで複数のリンクを展開する方法

質問

こんばんわ。Jquery超初心者です。

Jqueryでアコーディオンパネルを実装しようとしているのですが、Jqueryの指定に問題があるようで、
開きません。以下コードです。

(HTML)

<ul class="slide">
<li><a href="">窓口業務</a>
<ul>
<li><a href="">menu 1-1</a></li>
<li><a href="">menu 1-2</a></li>
<li><a href="">menu 1-3</a></li>
</ul>
</li>
<li><a href="">異動業務</a>
<ul>
<li><a href="">menu 2-1</a></li>
<li><a href="">menu 2-2</a></li>
<li><a href="">menu 2-3</a></li>
</ul>
</li>
<li><a href="">検針業務</a>
<ul>
<li><a href="">menu 3-1</a></li>
<li><a href="">menu 3-2</a></li>
<li><a href="">menu 3-3</a></li>

</ul>
</li>
<li><a href="">調定業務</a>
<ul>
<li><a href="">menu 4-1</a></li>
<li><a href="">menu 4-2</a></li>
<li><a href="">menu 4-3</a></li>

</ul>
</li>
</ul>

(JQuery)

$(function () {
$("ul.slide li ul").hide();
$("ul.slide li").click(function () {
$("ul.slide li").each(function () {
if ($("ul.slide li").css("display")=="none"){
$("ul.slide li ul"). slideDown();
} else {
$("ul.slide li ul").slideUp();
}
});
});
});

eachの使い方が間違っているのか、はたまた何か足りない記述があるのか、途方に暮れています。

何かお気づきの方、ご指摘の程宜しくお願い致します。

回答No.1

LOHA · ベストアンサー

私ならこうします。
＃動作確認はしていませんので、動かなかったらスミマセン。

$(function() {
　$("ul.slide ul").hide();
　$("ul.slide > li > a").click(function() {
　　$(this).next().slideToggle();
　});
});

ポイントは
・セレクタの'>'は子要素の意味（http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs2-02.htm#s2-2-2）
・途中のthisはクリックされたaエレメントを示している
・スライドの表示非表示はslideToggleが便利（http://semooh.jp/jquery/api/effects/slideToggle/%5Bspeed%5D,+%5Bcallback%5D/）

＞if ($("ul.slide li").css("display")=="none")
の$("ul.slide li")は、slideクラス配下の全li要素を表しているので問題があります。うまくthisを使うのが得策です。

ちなみに、jQueryUIにAccordionがあるので、それを使う手もありかもしれません。
http://jqueryui.com/demos/accordion/

お礼

返事が遅くなり申し訳ございません。

以下のコードで実現できました。

$(function () {
$("ul.slide li ul").css("display", "none");
$("ul.slide li").click(function () {

$("ul", this).slideToggle();

});
});

slideToggleの有用性が理解出来ました。ありがとうございました。