css property DISPLAY не дает желаемого результата

Question

Я назначил класс на 4 элемента div на странице, и все они установлены для отображения = none Теперь я хочу изменить это, чтобы отобразить блок, когда нажимается другой div на странице. Я успешно удалось 1. скрыть все элементы OnLoad 2. использование Javascript, чтобы изменить свойства отображения, чтобы блокировать при нажатии другой DIV элемент

проблема заключается в том, что он отображает содержимое полную ширину, как и есть на самом деле но вместо этого он появляется в одном столбце, перекрывающем все это, и в одном прямом столбце я не знаю, почему это происходит, и я буду благодарен за помощь.

Javascript код:

<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> 

Этот код работает отлично, ребята, пожалуйста, помогите мне понять, как отобразить его должным образом, когда кто-то нажимает на приготовление & рецепты, напитки, исследовать и рестораны. Ссылка на страницу: http://theinformant.to/food-drink/

Answer 1

похоже, что сайт использует isotope (http://isotope.metafizzy.co) для раскладки сетки. Переключение свойства display, к сожалению, не вызывает isotope для пересчета позиций отображения элементов.

Поскольку вы скрыли элементы на нагрузке, когда isotope инициализируется, он не может определить размер каждого элемента, как это не в документе потоке за счетом display: none, поэтому, когда показан, он просто получает уложены друг на друг , Вы также заметите, что при изменении размера окна просмотра элементы будут правильно размещены. Это связано с тем, что isotope прослушивает событие изменения размера окна и автоматически вызывает его метод layout().

Таким образом, решение, чтобы это когда вы меняете элементы display: block вы также должны вызвать isotope «s layout() метод (http://isotope.metafizzy.co/methods.html#layout).