Ich habe eine Reihe von Artikeln
%Vor%angeordnet in einem Raster von drei pro Zeile
%Vor%und ich möchte, dass sie horizontal expandieren, um ihre Zeile vollständig zu belegen, wenn sie angeklickt werden.
Ich erstelle eine expanded Klasse
und wenden Sie es bei Klick an
an %Vor%Ich bin fast da, wie Sie in der Geige hier Ссылка
sehen könnenWenn ich auf einen der Artikel klicke, expandiert er auf die volle Breite der Reihe; aber das Problem ist, dass wenn ich auf den ersten Artikel einer Zeile (außer der ersten Zeile) klicke " springt " in die Zeile direkt darüber.
Ich habe versucht, die position und display Attribute von article und .expanded zu ändern, aber ich kann nicht das Verhalten bekommen, das ich brauche. Zum Beispiel: Wenn ich position:absolute von .expanded ändere, "springen" die Blöcke 5 und 6 in die darunter liegende Zeile. Ähnlich, wenn ich display:inline-block entferne und zu float:left ändere.
Haben Sie irgendwelche Ideen, warum dies passiert und wie Sie es korrigieren können?
Wenn position:absolute auf ein <article> -Element gesetzt ist, wird es aus dem normalen Inhaltsfluss entfernt und verursacht den Offset. Wir können es korrigieren, indem wir einen leeren <article> als Platzhalter hinzufügen, wenn der Klick ausgelöst wird, und ihn bei einem erneuten Klick entfernen.
S. Ich bin bei jQuery nicht so gut, Vorschläge sind willkommen.
Wenn Sie die Lösung von @Rick (abzüglich der css top edit) verwenden und dann ein zusätzliches Element umschalten, um andere Elemente an Ort und Stelle zu halten, sollten Sie Folgendes tun: Geige
%Vor%Um weiter zu erklären, wenn auf das Element geklickt wird:
Wenn Sie die Klasse 'expanded' hinzufügen , wird auch ein leeres Artikelelement (zuvor) als Platzhalter hinzugefügt, um den Fluss konsistent zu halten. Dies ist wichtig, denn wenn das Element mit der Klasse "expanded" zu position: absolute wird, wird es aus dem normalen Fluss des Inhalts entfernt.
Wenn Sie die Klasse 'expanded' entfernen (), wird dadurch auch das Platzhalterelement für leere Artikel entfernt. Die Funktion prevAll durchsucht alle vorherigen Elemente mit der Klasse "blank" und nimmt dann die erste () und entfernt sie. Da es 'vorher' eingefügt wurde, wird dadurch garantiert, dass der richtige Platzhalter für leere Artikel entfernt wird.
Ich kann mir keine reine CSS-Lösung vorstellen, aber da Sie jQuery sowieso verwenden, schreiben Sie einfach das top :
Der top Stil wird ignoriert, sobald die erweiterte Klasse entfernt wurde.
Tags und Links javascript html jquery css