Jquery 设置共享同一类的单个div的动画

我在让动画功能在特定div上工作时遇到了一些问题。我在一个页面上显示x个视频。每个视频都有一个名为的类，该类在其下方显示描述。我在文本右侧有另一个div，它有一个背景图像，表示一个图标，供用户单击以展开描述。单击时，描述将在高度上展开定义的像素数。这段代码工作正常，但是当您单击图标展开它时，它会展开所有视频描述，因为它们共享同一个类。我不想使用不同的ID，因为当有数百个视频时，这将失去控制。我对jQuery还不熟悉，但已经研究了遍历并尝试使用parent和clock，我觉得这就是实现jQuery的方法，但我不能对此束手无策。任何帮助都将不胜感激

HTML

---

您应该使用

closest（）

：

试试这个-

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

---

这样使用的切换函数是，您需要某种标志，并且需要针对每个

.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'});
    }
});

---

元素数据（“状态”）检查的条件是什么？？奇怪的是，我以前从来没有看到过。它只是一面旗帜，挂在每个元素上，用来跟踪状态？哦，是的。。明白了我认为这是一种返回，无论元素是否处于动画状态，是否对其进行动画制作。不，无论元素是40px还是100px高。它基本上是一个切换函数，因为toggle（）已经被删除，至少是那个版本的toggle，现在它只隐藏和显示元素。这非常有效。我没有尝试.sibles（）部分。谢谢，这真的很有帮助。这也非常有效。既然所有的回复都很好，那么最有效的方法是什么？

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

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

$('.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'});
    }
});