单击时在具有给定 class 的最近元素上滑动

Question

我有一种网格布局，每列内都有图像、名称、标题和书面说明。

目前使用display:none;

隐藏了书面说明(p.sub-team-description)

我想设置动画，以便在单击图像时使用 slideDown 动画显示说明。

因为有很多项目具有相同的类名，所以我使用 jQuery 函数 .closest() 尝试 select 只有 最接近的 这个类名的实例。

我看不出我做错了什么，但它不起作用。请参阅 JSFiddle。 http://jsfiddle.net/ddzntq0b/1

$( ".sub-team img" ).click(function() {
    $(this).closest("p.sub-team-description").slideDown("fast", function() {});
});

Answer 1

我会做这样的事情...

$('.sub-team img').on('click',function(){

    $(this).parent().find('p').slideDown();

});

Answer 2

你可以这样做：

$(this).siblings("p.sub-team-description").slideDown("fast");

Answer 3

先找到父元素再找到要滑动的元素:

$(this).parent().find("p.sub-team-description").slideDown();

demo

Answer 4

更好我更喜欢隐藏我计划使用 jQuery 本身制作动画的元素:

http://jsfiddle.net/uv56z6j6/

$(function() {
    $(".sub-team-description").hide();
    $( ".sub-team img" ).click(function() {
        $(this).siblings("p.sub-team-description").slideToggle("fast");
    });
});

我也：

已添加 slideToggle()，您可能需要也可能不需要，请将其删除将
删除了 emtpy 回调，你应该只在你需要的时候添加它在行动之后实际做某事
将 closest() 替换为 siblings()，因为它们共享相同的内容 parent().

编辑：version with CSS display:none; instead of hide()

$( ".sub-team img" ).click(function() {
    $(this).siblings("p.sub-team-description").slideToggle("fast");
});

单击时在具有给定 class 的最近元素上滑动

slideDown on nearest element with a given class, on click

jquery

slidedown

closest