アコーディオンメニューが他にも影響してしまう

質問

$(function(){
$("dd:not(:first)").css("display","none");
$("dt:first").addClass("selected");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
$("dt").removeClass("selected");
$(this).addClass("selected");
}
}).mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
});

＜div class="accordion"＞
＜dl＞
＜dt＞Step.1＜/dt＞
＜dd＞＜p＞Lorem ipsum dolorturpis suscipit pretium. Aenean ultricies scelerisque dictum. Phasellus tincidunt, nibh lacinia facilisis aliquam, lacus quam condimens.＜/p＞＜/dd＞
＜dt＞Step.2＜/dt＞
＜dd＞＜p＞Integer rhoncus felis mauris. Donec massa Donec elementum arcu tortor.ec at pellentesque mi. Mauris lobortis libero ac metus ultricies accumsan. ＜/p＞＜/dd＞
＜dt＞Step.3＜/dt＞
＜dd＞＜p＞Integer pretium porttitor lectus at tempor. Donec nec cursus elit. sit amet turpis Praesent feugiat est eu tellus dictum ac imperdiet nisi imperdiet. ＜/p＞＜/dd＞
＜/dl＞
＜/div＞

「jQueryデザイン入門」という本を読みながらアコーディオンメニューを作ってみたのですが、HTML内のほかのdd,dtも隠れたり現れたりしてしまいます(^^;)
div class="accordion"のdd,dtに適用して他のdd,dtに影響しないようにするにはどのようにしたらいいのでしょうか？

回答No.2

kuzumiHK · ベストアンサー

JSファイルのキャッシュでなくてそうなる場合の可能性としましては、
ギャラリーが＜div class="accordion"＞の中に入ってしまっている場合が考えられます。

アコーディオンの中にギャラリーを含めたい場合は、
＜div class="accordion"＞の直接の子要素(dl)の子要素（dd）にだけ適用されるように、
下記のように記述すれば直ると思います。

$(function(){
$("div.accordion > dl > dd:not(:first)").css("display","none");
$("div.accordion > dl > dt:first").addClass("selected");
$("div.accordion > dl > dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("div.accordion > dl > dd").slideUp("slow");
$("+dd",this).slideDown("slow");
$("div.accordion > dl > dt").removeClass("selected");
$(this).addClass("selected");
}
}).mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
});

ただし、他にも＜div class="accordion"＞内に直接dl要素を使う可能性がある場合は、
＜div class="accordion"＞をやめて、
アコーディオンを効かせたいdl要素に＜dl class="accordion"＞と書いたほうが確実です。
divのクラス名をそのままにしてdlはhogeというクラス名をつけた場合は、
下記のdl.accordionをdl.hogeに置換すればOKです。

$(function(){
$("dl.accordion > dd:not(:first)").css("display","none");
$("dl.accordion > dt:first").addClass("selected");
$("dl.accordion > dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dl.accordion > dd").slideUp("slow");
$("+dd",this).slideDown("slow");
$("dl.accordion > dt").removeClass("selected");
$(this).addClass("selected");
}
}).mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
});

お礼

再度ありがとうございました！

dlの方にclassを付ける方がいいとのご指摘通りにしたら上手くいきました！
本当にどうもありがとうございました（^O^）

感謝！

回答No.1

kuzumiHK

こんな感じでいかがでしょうか。

$(function(){
$("div.accordion dd:not(:first)").css("display","none");
$("div.accordion dt:first").addClass("selected");
$("div.accordion dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("div.accordion dd").slideUp("slow");
$("+dd",this).slideDown("slow");
$("div.accordion dt").removeClass("selected");
$(this).addClass("selected");
}
}).mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
});

お礼

返信が遅くなりまして大変申し訳ございません、
試してみたのですが、やはりアコーディオンは正常に開閉するのですが、
同じページに置いているWPのギャラリーの画像につけたキャプション（この例の場合「てすと１」などの部分）が最初読み込んだ時は「てすと１」のキャプションが見えている状態で、
アコーディオンの方をクリックしているとどの画像のキャプションも見えない状態になってしまいます…

ちなみにギャラリーの方はこんな感じです
＜div id='gallery-1' class='gallery galleryid-52 gallery-columns-3 gallery-size-thumbnail'＞
＜dl class='gallery-item'＞
＜dt class='gallery-icon'＞

＜a href='#' title='untitled'＞
＜img width="150" height="150" src="hoge.jpg" class="attachment-thumbnail" alt="テスト１" title="untitled" /＞＜/a＞
＜/dt>
＜dd class='wp-caption-text gallery-caption'＞
テスト１
＜/dd＞＜/dl＞
＜dl class='gallery-item'＞
＜dt class='gallery-icon'＞
＜a href='#' title='untitled'＞
＜img width="150" height="150" src="hoge.jpg" class="attachment-thumbnail" alt="てすと２" title="untitled" /＞＜/a＞
＜/dt＞
＜dd class='wp-caption-text gallery-caption'＞

テスト２
＜/dd＞＜/dl＞
＜dl class='gallery-item'＞
＜dt class='gallery-icon'＞
＜a href='#' title='untitled'＞
＜img width="150" height="150" src="hoge.jpg" class="attachment-thumbnail" alt="てすと２" title="untitled" /＞＜/a＞
＜/dt＞
＜dd class='wp-caption-text gallery-caption'＞

テスト３
＜/dd＞＜/dl＞

＜/div＞