javascript - 子コンテナに非表示の要素がある IE8 の slideDown/slideUp

Question

さまざまなレベルのドロップダウンを備えたサイドメニューがあります。各レベルのコンテナは、display:none; に設定されています。親ボックスをクリックすると、javascript はこれらのコンテナーを上下にスライドさせます。

各ブロックを開くと、親 div が展開されず、メニューがフッターの上にスライドします。あなたの考えはわかりましたが、親要素を同じ高さで拡大するという修正を試みました。これは、サイトの他の領域でうまく使用されています。

問題は、親 div の高さを計算しているときに、display:none; であっても、内部のすべての div の高さが一緒に追加されて戻ってくることです。つまり、サイド メニューのセクションを展開すると、フッターが 10,000 ピクセルを超えます。(親の高さ = 親の高さ + 展開されたセクションの高さを使用)

フッター メニューの offset.top を取得しようとしましたが、これでも 10,000px を超えて返されます。他のブラウザでのアラートは、私が期待していたものを返すだけであり、なぜこれが起こっているのかを正確に知るためにJavaScriptを非常に賢くしているわけではありません。何かご意見は？

サンプルコード -

<div class="content">
    <div class="level1">
        <div class="level2">
            <div class="level3">
                <div class="level4">
                    SOME PRODUCTS....
                </div>
            </div>
            <div class="level3">
                SOME PRODUCTS....
            </div>
        </div>
        <div class="level2">
            <div class="level3">
                SOME PRODUCTS....
            </div>
            <div class="level3">
                SOME PRODUCTS....
            </div>
        </div>
    </div>
</div>

ただし、実際のリストには約 850 の製品があります。各 div をクリックすると、その内容が製品レベルまで展開されます。深さ 3 のものもあれば、深さ 5 または 6 のものもあります。すべての div は display:none; に設定されています。製品が現在表示されている場合を除き、親 div が自動的に開かれます。display:none;? に設定されていても、IE8 は各 div の高さを読み取るようです。