toggle parent container of image on click

I am building a layout and need help on a feature. the requirement is there is a container that is 288px (height) and is holding an image that is 576px (height). Once a user clicks anywhere on that parent container, the image stays the same height, but the parent container toggles between the full 576px and the half 288px. So the image will always be the same height, but the parent container will show either exactly half of the image (on page load) or when the user clicks on it, it will show the full height. Right now I can't seem to figure that part out, and have the image chaging height while the container flows with it. Right now the styling looks like this

html (slim)

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

css (toggling between classes)

.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');
      }
   });

some options I have tried in addition to this are to wrap everything else in another container that will toggle the persona-banner container, to add a hidden overflow-y, and adding different positioning the the image and parent container.

if anyone can help, that would be much appreciated :)

---

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');
});

---

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/

链接地址: http://www.djcxy.com/p/83976.html

上一篇: 嵌套列表切换可见性和：悬停效果

下一篇: 在点击时切换图像的父容器