javascript - 单击并显示更多元素

Question

当您单击 div ShowMore 时，我想显示更多内容，但是当我这样做时，所有部分都会显示更多内容，而不是我刚刚单击的元素。

总之，当您单击 div .showMore 时，div .panel 的高度会增加以显示隐藏文本。但是，当我单击 .showMore 时，每个具有 .panel 类的 div 也会进行动画处理，而我只是单击的 div 动画高度

我想这是我错过的一小行代码

JS

$(".showMore").click(function (){
if ($(".panel").height() == 100) {
    $(this).css({transform:"rotate(90deg)"});
$(".panel").animate({height: "250px"});
}
else if ($(".panel").height() == 250) {
    $(this).css({transform:"rotate(0deg)"});
    $(".panel").animate({height: "100px"});
}
});

Full code here: Codepen

Answer 1

查找包含单击元素的 panel 类元素:

$(".showMore").click(function (){

  var panel = $(this).closest(".panel");

  if (panel.height() == 100) {
    $(this).css({transform:"rotate(90deg)"});
    panel.animate({height: "250px"});
  }
  else if (panel.height() == 250) {
    $(this).css({transform:"rotate(0deg)"});
    panel.animate({height: "100px"});
  }
});

注意:删除 html 中重复的 id。