jQuery siblings 方法和设置高度

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

中更改具有 class 描述的 div 的高度

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

这一直在失败。

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

这行得通，但它会更改所有具有该 class 名称的 div 的高度，而不仅仅是它的同级。

有什么建议吗？

Answer 1

在您的第一个解决方案中，您是否打算使用 .learn-more 而不是 .show-more？在这种情况下，请注意描述 div 不是 link a 标签的兄弟；它是 parent 的兄弟姐妹。添加 .parent() 调用应该可以解决此问题。即

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

jQuery siblings 方法和设置高度

jQuery siblings method and set height

css

jquery

siblings