ｊQueryでアコーディオンメニュー

質問

質問させてください。

jQueryを使用してアコーディオンメニューを作成しているですが、上手くいきません。
ソースは以下のように記載しました。

(jQuery)
<script type="text/javascript">
$(function(){
$("dd:not(:first)").css("display", "none");
$("dl dt").click(function(){
if($("+dd", this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd", this).slideDown("slow");
}
});
});
</script>

(HTML)
<dl>
<dt>Step.1.</dt>
<dd><p>aaaaa</p></dd>
<dt>Step.2.</dt>
<dd><p>bbbbb</p></dd>
<dt>Step.3.</dt>
<dd><p>ccccc</p></dd>
</dl>

上記の場合、if()の中の$("+dd", this).css("display")がundefinedになるためチェックが正常に行われません。
どのように修正すればよいのでしょうか。

お手数ですがお知恵をお貸しください。お願いします。

回答No.1

fujillin · ベストアンサー

IE(6)だとご提示のままのコードでも動作するみたい。
"+dd"のセレクタの使い方は知りませんので、少し変えてもよければ、

$(function(){
$("dd:not(:first)").css("display", "none");

$("dl dt").click(function(){
if($(this).next("dd").css("display")=="none"){
$("dd").slideUp("slow");
$(this).next("dd").slideDown("slow");
}
});
});

でどうでしょうか？　（next("dd")はnext()だけでもいいかも）
* idやclassで指定していないので、<dl>が複数あると全部が対象になっちゃうけど…

お礼

できました。
ありがとうございました。