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

Question

$(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に影響しないようにするにはどのようにしたらいいのでしょうか？

kuzumiHK · Accepted Answer

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");
});
});

kuzumiHK · Answer

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

$(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");
});
});

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

JSファイルのキャッシュでなくてそうなる場合の可能性としましては、

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

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング