CSSプロパティDISPLAYで希望の出力が得られません

Question

私は4つのdiv要素にクラスを割り当てました。それらはすべてdisplay = noneに設定されています。ページの別のdivがクリックされたときにブロックを表示するように変更します。私は正常にすべての要素が異なるdiv要素がクリックされたときにブロックするための表示プロパティを変更するには、JavaScriptの 2.使用をONLOAD 1.非表示に管理している

問題は、それが実際にちょうどそれのようにコンテンツ全幅を示すことがありますそれは代わりに、それがすべてのものをオーバーラップする1つの列に現れます。なぜなら、これがなぜ起こっているのか分からず、私は助けに感謝します。

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

このコードが動作している細かな人は、私は、誰かが&レシピ、飲料を調理する上でクリックしたときに、それが正しく表示されてい探求し、レストランする方法を見つけ出す助けてください：JavaScriptコード

。ページへのリンク：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）も呼び出す必要があります。