Jquery动画发生在多个div上

Question

所以我有一个像这样的结构

<div class="content-block">
    <div class='hidden'> Hidden Content </div>
    <div class='click'> Click Me </div>

    <div class='hidden'> Hidden Content </div>        
    <div class='click'> Click Me </div>

</div>

我希望Jquery直接为隐藏内容设置动画,以便扩展高度和宽度.我的jquery是

$(".click").click(function(){ 
    $(".click").prev(".hidden").animate({
        width:100%, 
        height: 500px
    }, 500);
});

我遇到的问题是,这会激活所有.hidden div,而不仅仅是.click之前的div

Answer 1

指定上下文,使用$(this):

$(".click").click(function(){
    $(this).prev(".hidden").animate({width:100%, height: 500px}, 500);
});

在原始代码中,您选择了所有 .click元素,因此选择了所有前面的.hidden兄弟元素.