Question

我有以下HTML结构：

（玉模板语言）

#review-item-1.review-item
      a.submit-review-toggle(href="#").review-item-toggle +
      h3 Service
      .review-overview
        textarea(class='submit-review-overview', name='message', placeholder='Overview')
      .review-photo
        img(src="images/no-photo.png")

我希望能够展开和折叠.review-item div（顶部）的高度：

$(".submit-review-toggle").click(function() {
    $(".review-item").animate({
        height: "toggle",
    }, "slow");
});

问题是我在一个页面中会有很多.review-item个div。因此，我需要在点击自己的.review-item按钮后切换“当前”.submit-review-toggle div。

有关如何实现这一目标的任何建议吗？

Answer 1

尝试以下方法：

$(".submit-review-toggle").click(function() {
   $(this).closest(".review-item").animate({
       height: "toggle",
   }, "slow");

}）;

最接近的选择器获取与选择器匹配的第一个元素，从当前元素开始并逐步向上遍历DOM树。 See here for documentation

单击自己的切换按钮后，仅切换当前div？

1 个答案: