Question

我已经在页面上为4个div元素分配了类，并且所有这些元素都被设置为display = none现在我想要更改它以在单击页面上的另一个div时显示块。我成功地成功了 1.隐藏所有元素 2.使用javascript将显示属性更改为在单击其他div元素时阻止

问题是它显示内容的全宽，就像它实际上一样，但它显示在一列中重叠所有内容并且在一个直列中我不知道为什么会发生这种情况，我将非常感谢帮助。< / p>

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>

此代码工作正常，请帮助我弄清楚当有人点击烹饪时如何正确显示＆amp;食谱，饮料，探索和餐馆。链接到该页面：http://theinformant.to/food-drink/

Answer 1

网站似乎正在使用isotope（http://isotope.metafizzy.co）进行网格布局。遗憾的是，切换display属性不会导致isotope重新计算元素的显示位置。

由于您在加载时隐藏了元素，因此isotope初始化时，由于display: none而无法确定每个元素的大小，因为它不在文档流中，因此在显示时，它只是彼此堆叠在一起。您还会注意到，在调整视口大小时，元素会正确布局。这是因为isotope会侦听窗口调整大小事件并自动调用它的layout()方法。

因此解决方法是，当您将元素更改为display: block时，您还必须调用isotope layout()方法（http://isotope.metafizzy.co/methods.html#layout）。< / p>

css属性DISPLAY没有提供所需的输出

1 个答案: