Question

我想在你点击div ShowMore时显示更多信息，但是当我这样做时，所有部分都会显示更多内容，而不是我点击的元素。

总之，当您点击div .showMore时，div .panel的高度会增加以显示隐藏文字。但是当我点击.showMore每个div时，类.panel也会生成动画，而我只是点击的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

您只需要访问它的父元素即可更多地使用$(this)。

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

Answer 2

查找包含已点击元素的类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。

Answer 3

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

http://codepen.io/beshoysemsem/pen/xOQmRQ

点击并显示更多元素

3 个答案: