Question

我正在构建布局并需要有关功能的帮助。要求是有一个288px（高度）的容器，并且保持576px（高度）的图像。一旦用户单击该父容器上的任何位置，图像保持相同的高度，但父容器在完整的576px和一半288px之间切换。因此，图像将始终具有相同的高度，但父容器将显示图像的正好一半（在页面加载时）或当用户单击它时，它将显示完整的高度。现在我似乎无法想出那部分，并且当容器随之流动时，图像的高度也会变高。现在样式看起来像这样

html（苗条）

.persona-banner
  img#perImg.sm-img [alt='Persona Banner' ng-src="{{ persona.banner }}"]

css（在课程之间切换）

.persona-banner {
    height: 576px;
    margin-top: -88px;
    z-index: -1;
    img { position: absolute; }
  }

   .lrg-img {
    height: 576px;
    width: 1024px;
  }

  .sm-img {
    height: 288px;
    width: 1024px;
  }

jquery的

  $('img#perImg').click(function() {
      $(this).toggleClass("sm-img lrg-img", 1000);
      if ($(this).hasClass('sm-img')) {
      // moving other elements with the switch
        $('.persona-header-bottom').css('margin-top', '-400px');
      } else {
        $('.persona-header-bottom').css('margin-top', '-130px');
      }
   });

除了这个之外，我尝试过的一些选项是将其他所有内容包装在另一个容器中，该容器将切换persona-banner容器，添加隐藏的溢出-y，并添加不同的映像和父容器。

如果有人可以提供帮助，那将非常感激：）

Answer 1

You just need to change the height of the div.persona-banner not the image and will make its overflow:hidden to hide the rest of image when the height is 288px

https://jsfiddle.net/gtq6nL2a/

.persona-banner {
  height: 288px;
  z-index: -1;
  overflow:hidden;
}

.persona-banner img {
  height: 576px;
  width: 1024px;
  margin-top:-144px;
}

.persona-banner.active{
  height:576px;
}

.persona-banner.active img {
  margin-top:0;
}

and in the script we will toggle the active class to the div.persona-banner which will change its height

$('.persona-banner').click(function() {
  $(this).toggleClass('active');
});

Answer 2

You have misunderstood how toggleClass works, it doesn't swap between those two classes, it adds or removes both of them at the same time.

Also the second param can only be true or false and not 1000.

http://api.jquery.com/toggleclass/

点击

2 个答案: