0

我在让动画功能在特定 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>

查询： 

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

3 回答 3

0

你应该使用closest()：

$('.clickme').toggle(function () {
    $(this).closest('.video').find('.text').animate({
        height: '100px'
    });
}, function () {
    $(this).closest('.video').find('.text').animate({
        height: '40px'
    });
});
于 2013-05-06T19:41:14.153 回答
0

尝试这个 - 

$('.clickme').click(function(e) {
   e.preventDefault();
   $(this).parent().siblings('.text').animate({height:'100px'});
}, function() {
    $(this).parent().siblings('.text').animate({height:'40px'});
});
于 2013-05-06T19:41:24.243 回答
0

以这种方式使用的切换功能已被弃用和删除，您需要某种标志，并且您需要针对每个.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'});
    }
});

小提琴

于 2013-05-06T19:41:52.080 回答