动画单个div共享相同的类

Question

我有一些麻烦让动画功能在特定的div上工作。我在一个页面上显示x个视频。每个视频都有一个类，在它的下面显示一个描述。我在文本的右边有另一个div，它有一个背景图像，表示用户单击以展开描述的图标。当单击描述时，描述会在高度上展开定义的像素数。这段代码工作得很好，但是当您单击图标展开它时，它会展开所有视频描述，因为它们共享同一个类。我不想使用不同的ID，因为当有数百个视频时，这将失去控制。我是jQuery的新手，但是已经研究遍历并尝试使用parent和closet，我觉得这就是它可能实现的方式，但我无法理解它。任何帮助都会很感激。

HTML

<div class="video">
   <div class="text">Text text</div>
   <div class="icon"><a class="clickme"></a></div>
</div>

JQuery:

$('.clickme').toggle(function() {
        $('.text').animate({height:'100px'});
    }, 
    function() {
        $('.text').animate({height:'40px'});
});

Answer 1

以这种方式使用的toggle函数已弃用并已删除，您需要某种标记，并且您需要针对每个.text元素，而不是所有元素:

$('.clickme').click(function() {
    var elem = $(this).closest('.video').find('.text');
    if (elem.data('state')) {
        elem.data('state', false).animate({height:'40px'});
    }else{
        elem.data('state', true).animate({height:'100px'});
    }
});

小提琴

Answer 2

您应该使用closest():

$('.clickme').toggle(function () {
    $(this).closest('.video').find('.text').animate({
        height: '100px'
    });
}, function () {
    $(this).closest('.video').find('.text').animate({
        height: '40px'
    });
});

Answer 3

试试这个-

$('.clickme').click(function(e) {
   e.preventDefault();
   $(this).parent().siblings('.text').animate({height:'100px'});
}, function() {
    $(this).parent().siblings('.text').animate({height:'40px'});
});