jQuery slidetoggle 多个 div 一次使用同一个类答案

【问题标题】：jQuery slidetoggle multiple divs one at a time with same classjQuery slidetoggle 多个 div 一次使用同一个类
【发布时间】：2014-03-17 13:42:36
【问题描述】：

我正在尝试在多个 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？任何帮助表示赞赏，谢谢。

【问题讨论】：

那么，您是想让每个 div.content 同时滑动，还是只是想将一个共同的行为绑定到每个 div（每个 div.content 悬停时都会独立滑动）？

标签： javascript jquery html slidetoggle

【解决方案1】：

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

确保默认隐藏.content。

.content{
 display:none;
}

检查工作example

【讨论】：

【解决方案2】：

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

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

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

这是example on jsfiddle。

附：你为什么在幻灯片中返回 false ？

【讨论】：

@return false。这是大多数其他活动的好习惯，旧习惯很难改掉......

【解决方案3】：

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

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

【讨论】：