jQuery slidetoggle使用相同的类一次一个div

时间:2011-04-11 01:11:26

标签: javascript jquery html slidetoggle

我正在尝试在多个div悬停上使用slideToggle(),在其受尊重的容器div中显示另一个div。例如:

<div class="container">123
   <div class="content">ABC</div>
</div>
<div class="container">123
   <div class="content">ABC</div>
</div>

它在动态页面上运行,因此容器的数量范围可以是1-25。我试图在容器悬停上滑动每个div的"content"类。我用这个jQuery

function slide() {
   $(".content").slideToggle("fast");
   return false;
}

$(".container").hover(slide, slide);

但它只适用于第一个容器/内容div。如何在没有25个不同的jQuery函数的情况下使每个创建的div滑动?感谢任何帮助,谢谢。

3 个答案:

答案 0 :(得分:7)

$(".container").hover(function(){
$(this).find('.content').slideToggle();
});

确保默认隐藏.content

.content{
 display:none;
} 

检查工作example

答案 1 :(得分:2)

您需要将容器与正确的内容相关联。

function slide() {
   $(this).find(".content").slideToggle("fast");
   return false;
}

$(".container").hover(slide, slide);

这是一个example on jsfiddle

P.S。为什么你在幻灯片中返回false?

答案 2 :(得分:0)

另一个可能性:http://jsfiddle.net/UfjMe/5/

通过循环遍历每个项目,隐藏,然后添加悬停命令来工作。