CSS-Eigenschaft DISPLAY gibt nicht die gewünschte Ausgabe

Question

Ich habe 4 div Elemente auf der Seite Klasse zugewiesen und alle von ihnen sind auf display = none eingestellt, jetzt möchte ich ändern, um Block anzuzeigen, wenn ein anderes div auf der Seite angeklickt wird. Ich habe erfolgreich zu 1. verstecken alle Elemente onload verwalten 2. Verwendung JavaScript, um die Anzeige Eigenschaft ändern zu blockieren, wenn ein anderes div Element geklickt wird

das Problem ist, dass es den Inhalt voller Breite zeigen, wie es wirklich ist aber stattdessen taucht es in einer Spalte auf, die alles davon überlappt und in einer geraden Spalte weiß ich nicht, warum das geschieht, und ich werde die Hilfe schätzen.

JavaScript-Code:

<script> 
    function myFunction(id){ 
    var elements = document.querySelectorAll('.element'); 
    for(var i=0; i<elements.length; i++){ 
    elements[i].style.display = elements[i].id == id ? ' inline' : 'none'; 
    } 
} 
</script> 

Dieser Code funktioniert prima Jungs mir bitte helfen, herauszufinden, wie man es richtig haben angezeigt, wenn jemand auf dem Kochen & Rezepte, Getränke klickt, erkunden und Restaurants. Link zur Seite: http://theinformant.to/food-drink/

Answer 1

Es scheint, als ob die Site isotope (http://isotope.metafizzy.co) für das Rasterlayout verwendet. Das Umschalten der display-Eigenschaft führt leider nicht dazu, dass isotope die Anzeigepositionen der Elemente neu berechnet.

Da Sie die Elemente auf Last versteckte, wenn isotope initialisiert wird, ist es die Größe jedes Elements nicht bestimmen kann, da es nicht im Belegfluss aufgrund display: none, also wenn gezeigt ist, es wird nur auf der jeweils anderen gestapelt . Sie werden auch bemerken, dass die Elemente richtig angeordnet werden, wenn Sie die Größe des Ansichtsfensters verändern. Dies liegt daran, dass isotope auf ein Fenster-Größenanpassungsereignis wartet und automatisch die Methode layout() aufruft.

So ist die Lösung dieses Problems ist, wenn Sie Ihre Elemente zu display: block ändern Sie müssen auch isotope ‚s layout() Methode (http://isotope.metafizzy.co/methods.html#layout) nennen.