HTML&CSS&JS 互換性ツリー (IE、Firefox、Chrome)

Web デザインにおけるツリーとは何ですか?簡単に言うと、リンクをクリックするとサブディレクトリが展開され、もう一度クリックすると閉じます。これは最も単純なツリーです。実装方法も非常に簡単です。CSS には display プロパティがあり、コンテンツを表示するかどうかを制御できます。次に、JS を使用して CSS のプロパティを制御してこれを実現します。次のコードを参照してください。
<div>最上位ディレクトリ</div>
<div id="メニューリスト">
<div>メニュー 1</div>
<div>メニュー 2</div>
<div>メニュー 3</div>
</div>
これはツリーのプロトタイプです。もちろん、初期状態では CSS 表示属性が追加されます。最もよく使用される表示属性は none と block です。
Noneは表示なしを意味し、blockはブロック型要素のように表示されます。コードを見てみましょう。
<div>最上位ディレクトリ</div>
<div id="メニューリスト" style="display:none">
<div>メニュー 1</div>
<div>メニュー 2</div>
<div>メニュー 3</div>
</div>
このように、ページを実行すると、最上位のディレクトリのみが表示されます。これを制御したい場合は、jsコードを追加する必要があります。
1. まずメニューリストを取得する
var メニューリスト = document.getElementById("メニューリスト");
2. オブジェクトはCSSプロパティを制御できる
メニューリスト.style.display="ブロック";
判断を加える
(menulist.style.display="none") の場合
menulist.style.display="ブロック";
それ以外
メニューリスト.style.display="なし";
このようにして、最も原始的なツリーが生成され、最終的なコードは
<スクリプト>
関数 showmenu()
{
var メニューリスト = document.getElementById("メニューリスト");
(menulist.style.display=="none") の場合
メニューリスト.style.display="ブロック";
それ以外
メニューリスト.style.display="なし";
}
</スクリプト>
<div オン
click="showmenu();">トップディレクトリ</div>
<div id="メニューリスト" style="display:none">
<div>メニュー 1</div>
<div>メニュー 2</div>
<div>メニュー 3</div>
</div>
私は長い間、この方法を使用してプロパティディレクトリを作成してきました。ディレクトリがどんなに複雑であっても、この方法は毎回機能しました。次のスクリーンショットは、IE で作成したより複雑なツリーディレクトリの実行効果を示しています。

ひどいことが起こりました。Chrome ですべてがめちゃくちゃに見えました。情報検索をした後、ようやく理由がわかりました。block と none に加えて、display には他の多くの属性があります。block はブロックで表示され、レイアウトにはテーブルを使用しました。table と block に深い嫌悪感があるかどうかは神のみぞ知るところです。Microsoft は彼らの嫌悪感を無視するのが賢明だと考えていますが、Chrome は依然として標準に誠実に従っており、Firefox も同様です。したがって、彼らの説明にはまだ問題があります。この問題を解決する方法:
Display には、コンテンツをテーブル形式でレンダリングする table-cell というプロパティもあります。これは、レイアウトにテーブルを使用する場合にまさにやりたいことです。以下は、3 つのブラウザーの互換性のあるレンダリングです。