jQuery滑动切换多个div在同一时间一个类

Question

我试图在多个div hover's上使用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。我如何使它滑动切换每个创建的div没有25个不同的jQuery函数?

Answer 1

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

确保默认隐藏.content。

.content{
 display:none;
} 

检查工作示例

Answer 2

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

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

下面是一个关于jsfiddle的例子。

注:为什么在幻灯片中返回false

Answer 3

还有一种可能:http://jsfiddle.net/UfjMe/5/

通过循环遍历每个项，隐藏，然后添加hover命令来工作。