toggle родительский контейнер изображения при нажатии

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

Вам просто нужно изменить высоту div.persona-banner не образом и сделает его overflow:hidden, чтобы скрыть остальные изображение, когда высота 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; 
} 

и в сценарии мы будем переключать active класс к div.persona-banner, который изменит свое height

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

Answer 2

Вы не поняли, как работает toggleClass, не переключаться между этими двумя классами, он добавляет или удаляет их обоих одновременно.

Также вторые пары могут быть только истинными или ложными, а не 1000.

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