toggle übergeordneten Container von Bild auf klicken

Question

Ich bin ein Layout erstellen und Hilfe zu einer Funktion benötigen. Die Voraussetzung ist, dass es einen Container gibt, der 288px (Höhe) ist und ein Bild hält, das 576px (Höhe) ist. Sobald ein Benutzer irgendwo auf diesen übergeordneten Container klickt, bleibt das Bild auf der gleichen Höhe, aber der übergeordnete Container schaltet zwischen dem vollen 576px und dem halben 288px um. Das Bild wird also immer die gleiche Höhe haben, aber der übergeordnete Container zeigt entweder genau die Hälfte des Bildes (beim Laden der Seite) oder wenn der Benutzer darauf klickt, wird die volle Höhe angezeigt. Gerade jetzt kann ich nicht scheinen, diesen Teil heraus zu finden, und die Bildwechselhöhe zu haben, während der Behälter damit fließt. Im Augenblick ist das Styling sieht wie folgt aus

html (slim)

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

css (Makeln zwischen den Klassen)

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

Einige Optionen, die ich zusätzlich versucht habe, sind, alles andere in einen anderen Container zu verpacken, der den Container persona-banner umschaltet, einen versteckten Überlauf-y hinzufügt und eine andere Positionierung des Bildes und des übergeordneten Containers hinzufügt.

wenn jemand helfen kann, das wäre sehr willkommen :)

Answer 1

Sie müssen nur die Höhe des div.persona-banner nicht das Bild ändern, und wird seine overflow:hidden machen den Rest zu verbergen Bild, wenn die Höhe 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; 
} 

und im Skript schalen wir die active Klasse der div.persona-banner die ihr height

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

ändern

Answer 2

Sie falsch verstanden haben, wie toggleClass funktioniert, ist es nicht zwischen diesen beiden Klassen nicht tauschen, fügt er oder entfernt sie beide gleichzeitig an.

Auch kann der zweite param nur wahr oder falsch sein und nicht 1000.

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