Question

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

目前使用p.sub-team-description

隐藏了书面说明（display:none;）

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

因为有许多具有相同类名的项目，所以我使用了jQuery函数.closest()来尝试仅选择此类名的最近的实例。

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

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

Answer 1

~~它更好~~我更喜欢隐藏我计划使用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");
});

Answer 2

你可以这样做：

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

Answer 3

首先，你需要找到父元素，然后找到你想要slideDown的元素：

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

demo

Answer 4

我会做这样的事......

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

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

});

单击时，具有给定类的最近元素上的slideDown

4 个答案: