在点击时切换图像的父容器
我正在构建布局并需要某个功能的帮助。 要求是有一个容器是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以及添加对图像和父容器的不同位置。
如果任何人都可以帮助，那将非常感谢:)
你只需要改变div.persona-banner的高度，而不是图像，并将其overflow:hidden当高度为288px时overflow:hidden以隐藏图像的其余部分
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;
}
在脚本中，我们将切换active类到div.persona-banner ，这将改变它的height
$('.persona-banner').click(function() {
$(this).toggleClass('active');
});
您误解了toggleClass的工作方式，它不会在这两个类之间进行交换，它会同时添加或删除它们。
第二个参数也只能是真或假，而不是1000。
http://api.jquery.com/toggleclass/
链接地址: http://www.djcxy.com/p/83975.html