Question

我有像这样的DOM结构

<div>
    <div class="logo"></div>
    <div class="description"></div>
    <div class="learnMore"><a class="learn-more" href="#path">Learn More</a>                     
</div>
<div>
   <div class="logo"></div>
   <div class="description"></div>
   <div class="learnMore"><a class="learn-more" href="#path">Learn More</a>                       
</div>

单击a标签时，我试图在同一父div中使用类描述更改div的高度

$('.learn-more').click(function() {
    $(this).siblings('.description').animate({height: '90px'}, 200);
}

这一直在失败。

$('.description').animate({height: '90px'}, 200);

这样可行，但它改变了所有具有该类名称的div的高度，而不仅仅是它的兄弟。

有什么建议吗？

Answer 1

在您的第一个解决方案中，您的意思是使用.learn-more代替.show-more吗？在这种情况下，请注意描述div不是链接标签的兄弟;它是其父母的兄弟姐妹。添加.parent()电话应修复此问题。即。

    $('.show-more').click(function() {
        $(this).parent().siblings('.description').animate({height: '90px'}, 200);
    }

jQuery兄弟方法和设置高度

1 个答案: